Why does Leaflet create multiple pages

import { Component } from '@angular/core';
import L from 'leaflet';
import { isPlatformBrowser } from '@angular/common';

@Component({
selector: 'app-map',
standalone: true,
imports: [],
templateUrl: './map.component.html',
styleUrl: './map.component.css'
})
export class MapComponent {
private index = 0;
constructor() {
}

ngOnInit(){
var map = L.map('map').setView([51.505, -0.09], 13);

this.index++;
console.log(this.index)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
}

}


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

import { MapComponent } from './map/map.component';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import L from 'leaflet';

@Component({

selector: 'app-root',
standalone: true,
imports: [MapComponent, RouterModule],
template: `
<main>
<a [routerLink]="['/']">
<header class="brand-name">
</header>
</a>
<section class="content">
<router-outlet></router-outlet>
</section>
</main>
`,
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'homes';

constructor(){

}

ngOnInit() {
//console.log(this.http.get<any>(this.apiUrl));
}
}


It is a very simple code with a mapcomponent and a appcomponent. I do not have any idea what happens.

Honestty, I do not undersand what happens. I followed the tutorial of leaflet. There are nothing more, any component, I just created a project with npm new and created a component with ng generate.



Continue reading...