Angular-google-maps: Error: Template parse errors: 'agm-map' is not a known element:

Created on 12 May 2017 · 10Comments · Source: SebastianM/angular-google-maps

Please help me,

my dependencies:
"@agm/core": "^1.0.0-beta.0"

my app.module:
import { AgmCoreModule } from '@agm/core';

AgmCoreModule.forRoot({
apiKey: '(myapikey)'
})

my template:

<ion-content padding>
    <agm-map></agm-map>
</ion-content>

which is the error?

thanks, you are the best!!

Source

jespoz

Most helpful comment

@jespoz
Encountered same error, solution was to add AgmCoreModule to imports at the module that uses the map, so having AppModule and AccountModule I have following imports:

@NgModule({
    imports: [
        ***,
        AgmCoreModule.forRoot({
            apiKey: 'AIzaSyAsMcr_0zqJ0QG18Z4cx-ETuOps02jhD3g'
        })
    ],
    declarations: [***],
    bootstrap: [*** ]
})
export class AppModule {
}

@NgModule({
    imports: [
       ***,
        AgmCoreModule
    ],
    declarations: [
      ***
    ],
    providers: [
        ***
    ]
})
export class AccountModule {
}

Please note that * stands for other non-relative to the problem imports, providers etc
It is really a little ambiguous that we have to use AgmCore**Module at the nested modules

Golem765 on 22 Dec 2017

👍12 ❤3 🎉3

All 10 comments

You have nothing in your template ?

AJRdev on 18 May 2017

Yes, only agm-map element

<agm-map></agm-map>

jespoz on 18 May 2017

Oh ok, didn't see it at first before your edited it.

Now I see the problem, you should get a look at the Plunker on the README of the project, you will understand straight away.

Basically you have to add this import :

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

Then add a component :

@Component({
  selector: 'my-map',
  styles: [`
    .sebm-google-map-container {
       height: 300px;
     }
  `],
  template: `
    <sebm-google-map>
    </sebm-google-map>
`})

And finally replace your template by :

<ion-content padding>
    <agm-map></agm-map>
</ion-content>

With that you should have a basic google map displayed.
Let me know how it goes !

AJRdev on 21 May 2017

👎6

@jespoz
Encountered same error, solution was to add AgmCoreModule to imports at the module that uses the map, so having AppModule and AccountModule I have following imports:

@NgModule({
    imports: [
        ***,
        AgmCoreModule.forRoot({
            apiKey: 'AIzaSyAsMcr_0zqJ0QG18Z4cx-ETuOps02jhD3g'
        })
    ],
    declarations: [***],
    bootstrap: [*** ]
})
export class AppModule {
}

@NgModule({
    imports: [
       ***,
        AgmCoreModule
    ],
    declarations: [
      ***
    ],
    providers: [
        ***
    ]
})
export class AccountModule {
}

Please note that * stands for other non-relative to the problem imports, providers etc
It is really a little ambiguous that we have to use AgmCore**Module at the nested modules

Golem765 on 22 Dec 2017

👍12 ❤3 🎉3

Thank you so much @Golem765 it worked!

cyrus3212 on 6 Feb 2018

@Golem765 It's not working.

Basically I want to use the map in module other than appModule. But I am getting error as 'ngui-map' is not a known element.

pammusankolli on 18 Feb 2018

👍1

@pammusankolli
Double check the config, it is totally working for me in any combination of modules, even if module that uses map is shared between different angular apps.
Also note that you are getting another error than described in issue, so consider looking for another reasons

Golem765 on 19 Feb 2018

not working still the same error