Implementing MapLibre GL in an Angular app

I am trying to follow this tutorial (https://maplibre.org/ngx-maplibre-gl/API/) to implement MapLibre GL in an Angular app, but can't make it.

I don't get how to implement this code from the tutorial:

import { Component } from '@angular/core';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';

@NgModule({
template: `
<mgl-map
[style]="'https://demotiles.maplibre.org/style.json'"
[zoom]="[9]"

="[-74.5, 40]"
>
</mgl-map>
`,
styles: [
`
mgl-map {
height: 100%;
width: 100%;
}
`,
],
imports: [MapComponent],
})
export class AppComponent {}


Adapting it to a component like

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

@Component({
selector: 'app-tabs',
template: `
<mgl-map
[style]="'https://demotiles.maplibre.org/style.json'"
[zoom]="[9]"

="[-74.5, 40]"
>
</mgl-map>
`,
styles: [
`
mgl-map {
height: 100%;
width: 100%;
}
`,
],
standalone: false
})
export class MapPage {
constructor() {}
}


does just show a black screen.

I absolutely don't get how the code from the tutorial should work, because if I just implement the tutorial code straight forward my compiler says Object literal may only specify known properties, and 'template' does not exist in type 'NgModule'.

Can you make the code from the tutorial work? How?

Thank you very much for your help

Continue reading...​