Вы должны включить эти ресурсы в свой index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
</head>
<body>
</body>
</html>
в вашем файле component.html
<div id="mapid"></div>
component.css
#mapid { height: 180px; }
в вашем файле component.ts
import { Component, OnInit } from '@angular/core';
declare let L;
@Component({
selector: 'app-mapvisual',
templateUrl: './mapvisual.component.html',
styleUrls: ['./mapvisual.component.css']
})
export class MapvisualComponent implements OnInit {
constructor() { }
ngOnInit() {
const map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org /copyright">OpenStreetMap</a> contributors'
}).addTo(map);
}
}