When i am trying to go to a component which uses angular2-google-maps module, it is giving me this error:
Can't resolve all parameters for [object Object] (?). ; Zone: angular ; Task: Promise.then ;
I can't see which object is this and why the error is occurring. Also this is only occurring when i am using webpack to generate app.bundle.
The component that i am trying to load is:
import { Component, OnInit} from '@angular/core';
import {userInfo} from '../data/userInfo';
import { Http, Response } from '@angular/http';
import {Router} from '@angular/router';
import {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'],
})
and my systemjs.config.js file is:
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',
};
// packages tells the System loader how to load when no filename and/or no extension
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' },
};
and my main.ts file looks like this:
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));
So apparently, Angular 2 was not able to recognize the dependency. ANGULAR2_GOOGLE_MAPS_PROVIDERS
and ANGULAR2_GOOGLE_MAPS_DIRECTIVES
were not properly referenced.
The Google maps version that i was using for Angular 2 was old. I would recommend anyone who wants to implement Google Maps in his Angular site, go for version 0.12.0 and it should not have any referencing problem.