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.

Salamis

Can you include your NgModule definition? – Predicant

It seems ok for me. Does SiteMapComponent have his own module or maybe a father module? If so, try to import AgmCoreModule on it (without .forRoot() since you've already imported it in AppModule. – Predicant

No SiteMapComponent does not have it's own module or father module, I'll try and import AgmCoreModule see if that works. Thanks. – Salamis

@Predicant Same error with importing AgmCoreModule into my SiteMapComponent. – Salamis

Answer 1

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.

Salamis

In your comment you said that the component didn't have it's own module or a father module (other than app.module). Are you saying that you had to create one? – Allodial

Hi, No I never created another module I just moved the declaration to the module that directly was consuming the component. For example if you have app module and main module that inherits app, if you directly use the component in main module that is where you put the import. – Salamis

Answer 2

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

Toluol

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 { }

Ironmaster

Answer 4

For anyone who may have created an app.routing.ts file, the import needs to be declared there instead of your app.module.ts file.

@NgMoudule ({ 
declarations: [ALLOTHERCOMPONENTS],
imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes),
    AgmCoreModule.forRoot({
        apiKey: '*'
      }),
    ], 
})

Pournaras

Is it alright to declare it in both? Also the 'ALLOTHERCOMPONENTS' section. Are you saying if you include routing in your angular project, you should be declaring all of your components in app-routing.module instead of app.module? Or Both places? – Ameba