I'm trying to add AGM Angular Google Maps (https://github.com/SebastianM/angular-google-maps) to my Angular4 Project
Guide followed: https://github.com/SebastianM/angular-google-maps/blob/master/docs/getting-started.jade
The error I get when I visit the page with the agm component:
core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'latitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("th:100%;height:auto;" src="/assets/common/images/live-demo.png">-->
<agm-map [ERROR ->][latitude]="lat" [longitude]="lng">
<!--<agm-map-marker [latitude]="lat" [longit"): ng:///MainModule/SiteMapComponent.html@22:29
Can't bind to 'longitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'longitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("to;" src="/assets/common/images/live-demo.png">-->
<agm-map [latitude]="lat" [ERROR ->][longitude]="lng">
<!--<agm-map-marker [latitude]="lat" [longitude]="lng"></agm-"): ng:///MainModule/SiteMapComponent.html@22:46
'agm-map' is not a known element:
1. If 'agm-map' is an Angular component, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("tyle="width:100%;height:auto;" src="/assets/common/images/live-demo.png">-->
[ERROR ->]<agm-map [latitude]="lat" [longitude]="lng">
<!--<agm-map-marker [latitude]="lat"): ng:///MainModule/SiteMapComponent.html@22:20
Error: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'latitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("th:100%;height:auto;" src="/assets/common/images/live-demo.png">-->
<agm-map [ERROR ->][latitude]="lat" [longitude]="lng">
<!--<agm-map-marker [latitude]="lat" [longit"): ng:///MainModule/SiteMapComponent.html@22:29
Can't bind to 'longitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'longitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("to;" src="/assets/common/images/live-demo.png">-->
<agm-map [latitude]="lat" [ERROR ->][longitude]="lng">
<!--<agm-map-marker [latitude]="lat" [longitude]="lng"></agm-"): ng:///MainModule/SiteMapComponent.html@22:46
'agm-map' is not a known element:
1. If 'agm-map' is an Angular component, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("tyle="width:100%;height:auto;" src="/assets/common/images/live-demo.png">-->
[ERROR ->]<agm-map [latitude]="lat" [longitude]="lng">
<!--<agm-map-marker [latitude]="lat"): ng:///MainModule/SiteMapComponent.html@22:20
at syntaxError (http://localhost:4200/vendor.bundle.js:107191:34) [angular]
at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:117682:19) [angular]
at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:131433:39) [angular]
at http://localhost:4200/vendor.bundle.js:131357:62 [angular]
at Set.forEach (native) [angular]
at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:131357:19) [angular]
at createResult (http://localhost:4200/vendor.bundle.js:131242:19) [angular]
at Object.onInvoke (http://localhost:4200/vendor.bundle.js:4535:37) [angular]
at http://localhost:4200/polyfills.bundle.js:5617:57 [angular]
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4526:37) [angular]
at syntaxError (http://localhost:4200/vendor.bundle.js:107191:34) [angular]
at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:117682:19) [angular]
at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:131433:39) [angular]
at http://localhost:4200/vendor.bundle.js:131357:62 [angular]
at Set.forEach (native) [angular]
at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:131357:19) [angular]
at createResult (http://localhost:4200/vendor.bundle.js:131242:19) [angular]
at Object.onInvoke (http://localhost:4200/vendor.bundle.js:4535:37) [angular]
at http://localhost:4200/polyfills.bundle.js:5617:57 [angular]
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4526:37) [angular]
at resolvePromise (http://localhost:4200/polyfills.bundle.js:5569:31) [angular]
at resolvePromise (http://localhost:4200/polyfills.bundle.js:5540:17) [angular]
at http://localhost:4200/polyfills.bundle.js:5617:17 [angular]
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4526:37) [angular]
at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:5450:35) [<root>]
at <anonymous> [<root>]
I have made sure/tried;
AgmCoreModule
My site-map.component.ts:
import { Component, AfterViewInit, Injector, ViewEncapsulation, ViewChild, trigger, transition, style, animate, state, } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { NotifyService } from '@abp/notify/notify.service';
import { AppConsts } from '@shared/AppConsts';
import { AppComponentBase } from '@shared/common/app-component-base';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import * as moment from "moment";
import { JTableHelper } from '@shared/helpers/JTableHelper';
import { AgmMap, AgmMarker } from '@agm/core';
var google: any;
@Component({
templateUrl: 'site-map.component.html',
animations: [appModuleAnimation()]
})
export class SiteMapComponent extends AppComponentBase {
title: string = 'My first AGM project';
lat: number = 51.678418;
lng: number = 7.809007;
constructor(
injector: Injector
)
{
super(injector);
}
}
My site-map.component.html
<agm-map [latitude]="lat" [longitude]="lng">
<agm-map-marker [latitude]="lat" [longitude]="lng"></agm-map-marker>
</agm-map>
My app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
import * as ngCommon from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { ModalModule, TooltipModule } from 'ngx-bootstrap';
import { FileUploadModule } from '@node_modules/ng2-file-upload';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/layout/header.component';
import { HeaderNotificationsComponent } from './shared/layout/notifications/header-notifications.component';
import { SideBarComponent } from './shared/layout/side-bar.component';
import { FooterComponent } from './shared/layout/footer.component';
import { LoginAttemptsModalComponent } from '@app/shared/layout/login-attempts-modal.component';
import { ChangePasswordModalComponent } from '@app/shared/layout/profile/change-password-modal.component';
import { ChangeProfilePictureModalComponent } from '@app/shared/layout/profile/change-profile-picture-modal.component';
import { MySettingsModalComponent } from '@app/shared/layout/profile/my-settings-modal.component';
import { AbpModule, ABP_HTTP_PROVIDER } from '@abp/abp.module';
import { UtilsModule } from '@shared/utils/utils.module';
import { AppCommonModule } from './shared/common/app-common.module';
import { ServiceProxyModule } from '@shared/service-proxies/service-proxy.module';
import { API_BASE_URL } from '@shared/service-proxies/service-proxies';
import { AppConsts } from '@shared/AppConsts';
import { AppSessionService } from '@shared/common/session/app-session.service';
import { ImpersonationService } from './admin/users/impersonation.service';
import { LinkedAccountService } from './shared/layout/linked-account.service';
import { LinkedAccountsModalComponent } from '@app/shared/layout/linked-accounts-modal.component';
import { LinkAccountModalComponent } from '@app/shared/layout/link-account-modal.component';
import { NotificationsComponent } from './shared/layout/notifications/notifications.component';
import { NotificationSettingsModalCompoent } from './shared/layout/notifications/notification-settings-modal.component';
import { UserNotificationHelper } from './shared/layout/notifications/UserNotificationHelper';
import { ChatBarComponent } from './shared/layout/chat/chat-bar.component';
import { ChatFriendListItem } from './shared/layout/chat/chat-friend-list-item.component';
import { ChatSignalrService } from '@app/shared/layout/chat/chat-signalr.service';
import { QuickSideBarChat } from '@app/shared/layout/chat/QuickSideBarChat';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import { environment } from '../environments/environment';
import { AgmCoreModule } from '@agm/core';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
HeaderNotificationsComponent,
SideBarComponent,
FooterComponent,
LoginAttemptsModalComponent,
LinkedAccountsModalComponent,
LinkAccountModalComponent,
ChangePasswordModalComponent,
ChangeProfilePictureModalComponent,
MySettingsModalComponent,
NotificationsComponent,
ChatBarComponent,
ChatFriendListItem,
NotificationSettingsModalCompoent,
],
imports: [
ngCommon.CommonModule,
FormsModule,
HttpModule,
JsonpModule,
TabsModule.forRoot(),
ModalModule.forRoot(),
TooltipModule.forRoot(),
FileUploadModule,
AbpModule,
AppRoutingModule,
UtilsModule,
AppCommonModule.forRoot(),
ServiceProxyModule,
AngularFireModule.initializeApp(firebaseConfig, 'my-app'),
AngularFireDatabaseModule,
AngularFireAuthModule,
AgmCoreModule.forRoot({
apiKey: 'YOUR_KEY'
})
],
providers: [
ImpersonationService,
LinkedAccountService,
UserNotificationHelper,
ChatSignalrService,
QuickSideBarChat
]
})
export class AppModule { }
Any help is much appreciated.
This error occurs only when you have a child module for the components where you are implementing the map, So you need to add that module in your child module too without forRoot()
app.module.ts
import { AgmCoreModule } from '@agm/core';
@NgModule({
imports: [
AgmCoreModule.forRoot({
apiKey: ''
})
]
})
child.module.ts
import { AgmCoreModule } from '@agm/core';
@NgModule({
imports: [
AgmCoreModule
]
})
This will work fine because now the child module has AgmCoreModule