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.

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`. — developer033, May 14 '17 at 22:12
No SiteMapComponent does not have it's own module or father module, I'll try and import AgmCoreModule see if that works. Thanks. — David Hawkins, May 14 '17 at 23:01
@developer033 Same error with importing AgmCoreModule into my SiteMapComponent. — David Hawkins, May 14 '17 at 23:05

score 29 · Answer 1 · edited Sep 18 '19 at 09:44

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

score 19 · Accepted Answer · answered May 14 '17 at 23:16

19

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.

answered May 14 '17 at 23:16

David Hawkins

1,049
1
10
30

[In your comment](https://stackoverflow.com/questions/43968882/cant-bind-to-latitude-since-it-isnt-a-known-property-of-agm-map#comment74969134_43968882) 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? – svict4 Feb 13 '18 at 00:53
1

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. – David Hawkins Feb 13 '18 at 10:46

score 2 · Answer 3 · answered Oct 16 '17 at 18:24

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

score 1 · Answer 4 · answered Nov 19 '18 at 16:19

1

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: '*'
      }),
    ], 
})

answered Nov 19 '18 at 16:19

rychrist88

643
6
14

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? – Corey Schnedl May 17 '19 at 04:02

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

4 Answers4