Can't bind to 'latitude' since it isn't a known property of 'agm-map'

Question

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;

• My module imports AgmCoreModule
• Added CUSTOM_ELEMENTS_SCHEMA to SCHEMAS in my module (this had no effect)
• Binding lat/lng values to literal integers

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.

Answer 1

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

Answer 2

I resolved my issue thanks to @developer033 I had imported Angular Google Maps into my app.module but it needed to be in main.module instead where I am actually consuming it via a component.

Answer 3

thanks to plotoshas' answer in issues 71 you have to harness angular 2 CUSTOM_ELEMENTS_SCHEMA by the following way :

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

// ...

@NgModule({
  // ...
  schemas:  [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }