Error: Map container not found. with leaflet map using Angular-CodePudding

Full error:

core.js:6479 ERROR Error: Map container not found.
    at NewClass._initContainer (leaflet-src.js:4066)
    at NewClass.initialize (leaflet-src.js:3099)
    at new NewClass (leaflet-src.js:296)
    at Object.createMap [as map] (leaflet-src.js:4691)
    at MapViewComponent.ngAfterViewInit (map-view.component.ts:13)
    at callHook (core.js:2526)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9536)
    at refreshEmbeddedViews (core.js:10590)

I get this whenever I try to load the component that contains the map. Here is the .ts file (I hid the access token)

import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map-view',
  templateUrl: './map-view.component.html',
  styleUrls: ['./map-view.component.scss'],
})
export class MapViewComponent implements AfterViewInit {
  constructor() {}

  ngAfterViewInit(): void {
    const mymap = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution:
        'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1,
      accessToken: 'my.token',
    }).addTo(mymap);
  }
}

.html file

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>

<div id="map"></div>

and .css file

#map {
  height: 500px;
}

It's really a simple map I'm just following the quickstart guide on their site but it's not working. I've already tried with ngOnInit and it's the same thing. Also added leaflet to angular.json. I tried changing the order of the lines in the .html file, placing the map div in all 3 possible places and it's the same error.

CodePudding user response：

You are not supposed to add link and script tags in component html file. Add these links in application index.html

<body>
    <app-root></app-root>

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
</body>

Component.html

<div id="map"></div>

Component.ts

declare const L: any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

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

CodePudding user response：

Try to use this code:

<div class="map-container">
  <div class="map-frame">
    <div id="map"></div>
  </div>
</div>

and use angular.json to connect CSS:

Here is a good example