Why do I get this error: Can't bind to 'latitude' since it isn't a known property of 'sebm-google-map' when adding the selector tags in Angular 4?

Question

I'm trying to get angular-google-maps / @agm/core working on my Angular 4 installation.

I have this in the component html file:

<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

When I run it I get this error message:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'sebm-google-map'.
1. If 'sebm-google-map' is an Angular component and it has 'latitude' input, then verify that it is part of this module.
2. If 'sebm-google-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. ("<sebm-google-map [ERROR ->][latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></se"): ng:///AppModule/GoogleMapsComponent.html@0:17

Answer 1

I found the error and I would like to share my solution with you.

To get the angular2-google-map now called @agm/core working it is important to update the selector tags. The author has not yet updated the docs (in this moment of the post).

BEFORE last update:

npm install angular2-google-maps --save

<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

NOW after latest update

npm install @agm/core --save

<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

Example setup:

file: google-maps.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-google-maps',
  templateUrl: './google-maps.component.html',
  styleUrls: ['./google-maps.component.css'],
})

export class GoogleMapsComponent implements OnInit {
  lat: number = 51.678418;
  lng: number = 7.809007;

constructor() { }

  ngOnInit() {
  }

}

file: google-maps.component.html

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

file: google-maps.component.css

.sebm-google-map-container {
  height: 300px;
}

file: app.module.ts

import { AgmCoreModule } from '@agm/core';
@NgModule({imports: [AgmCoreModule.forRoot()}]]