title: Can't bind to 'latitude' since it isn't a known property of 'agm-map'
body: <p>I'm trying to add AGM Angular Google Maps (<a href="https://github.com/SebastianM/angular-google-maps" rel="noreferrer">https://github.com/SebastianM/angular-google-maps</a>) to my Angular4 Project</p>
  
  <p>Guide followed: <a href="https://github.com/SebastianM/angular-google-maps/blob/master/docs/getting-started.jade" rel="noreferrer">https://github.com/SebastianM/angular-google-maps/blob/master/docs/getting-started.jade</a></p>
  
  <p>The error I get when I visit the page with the agm component:</p>
  
  <pre><code>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"&gt;--&gt;
  
                      &lt;agm-map [ERROR -&gt;][latitude]="lat" [longitude]="lng"&gt;
                      &lt;!--&lt;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"&gt;--&gt;
  
                      &lt;agm-map [latitude]="lat" [ERROR -&gt;][longitude]="lng"&gt;
                      &lt;!--&lt;agm-map-marker [latitude]="lat" [longitude]="lng"&gt;&lt;/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"&gt;--&gt;
  
                      [ERROR -&gt;]&lt;agm-map [latitude]="lat" [longitude]="lng"&gt;
                      &lt;!--&lt;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"&gt;--&gt;
  
                      &lt;agm-map [ERROR -&gt;][latitude]="lat" [longitude]="lng"&gt;
                      &lt;!--&lt;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"&gt;--&gt;
  
                      &lt;agm-map [latitude]="lat" [ERROR -&gt;][longitude]="lng"&gt;
                      &lt;!--&lt;agm-map-marker [latitude]="lat" [longitude]="lng"&gt;&lt;/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"&gt;--&gt;
  
                      [ERROR -&gt;]&lt;agm-map [latitude]="lat" [longitude]="lng"&gt;
                      &lt;!--&lt;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) [&lt;root&gt;]
      at &lt;anonymous&gt; [&lt;root&gt;]
  </code></pre>
  
  <p>I have made sure/tried;</p>
  
  <ul>
  <li>My module imports <code>AgmCoreModule</code></li>
  <li>Added CUSTOM_ELEMENTS_SCHEMA to SCHEMAS in my module (this had no effect)</li>
  <li>Binding lat/lng values to literal integers</li>
  </ul>
  
  <p>My site-map.component.ts:</p>
  
  <pre><code>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);
      }
  
  }
  </code></pre>
  
  <p>My site-map.component.html</p>
  
  <pre><code>&lt;agm-map [latitude]="lat" [longitude]="lng"&gt;
                      &lt;agm-map-marker [latitude]="lat" [longitude]="lng"&gt;&lt;/agm-map-marker&gt;
                      &lt;/agm-map&gt;
  </code></pre>
  
  <p>My app.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>Any help is much appreciated.</p>