Encountering an error when attempting to navigate to a component that utilizes the angular2-google-maps module. The specific error message is:
Can't resolve all parameters for [object Object] (?). ; Zone: angular ; Task: Promise.then ;
Unable to determine which object is causing this error or the reason behind it. This issue only arises when using webpack to generate the app bundle.
The component being loaded is as follows:
import { Component, OnInit} from '@angular/core';
import {userInfo} from '../data/userInfo';
import { Http, Response } from '@angular/http';
import {Router} from '@angular/router';
{ANGULAR2_GOOGLE_MAPS_DIRECTIVES, ANGULAR2_GOOGLE_MAPS_PROVIDERS} from 'angular2-google-maps/core';
import {ProjectNameComponent} from '../project-name-component/projectName.component';
import {LocationService} from './location.service';
@Component({
selector: 'location',
templateUrl: 'app/location-component/location.component.html',
styleUrls: ['app/location-component/location.component.css', 'app/app.css'],
directives: [ANGULAR2_GOOGLE_MAPS_DIRECTIVES, ProjectNameComponent],
providers: [ANGULAR2_GOOGLE_MAPS_PROVIDERS],
inputs: ['locationShow'],
})
My systemjs.config.js file includes the following mappings:
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'angular2-datatable': 'node_modules/angular2-datatable',
'angular2-google-maps': 'node_modules/angular2-google-maps',
'lodash': 'node_modules/lodash/lodash.js',
};
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'angular2-google-maps': { main: 'core.js', defaultExtension: 'js' },
'angular2-datatable': { defaultExtension: 'js' },
};
Additionally, my main.ts file contains the following code:
import 'core-js';
import 'reflect-metadata';
import 'zone.js/dist/zone';
import {enableProdMode} from '@angular/core';
enableProdMode();
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import {APP_ROUTER_PROVIDERS} from './app.router';
import { Http, HTTP_PROVIDERS, Response} from '@angular/http';
bootstrap(AppComponent, [APP_ROUTER_PROVIDERS, HTTP_PROVIDERS]).catch(err => console.error(err));