title: How can I import leaflet into an angular project?
body: <p>I'm trying to use the leatflet package in my Angular project but I can't get it to work.</p>
  
  <p>I installed leatflet with <code>npm install leatflet --save</code> then I'm including the dependencies in the <code>angular.json</code> file: </p>
  
  <pre><code>"styles": [
              "node_modules/leaflet/dist/leaflet.css",
  ],
  "scripts": [
              "node_modules/leaflet/dist/leaflet.js"
  ],
  </code></pre>
  
  <p>My <code>app.component.ts</code> file:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import * as L from 'leaflet';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit{
  
  
    constructor() {}
  
    ngOnInit() {
      const myMap = L.map('map').setView([51.505, -0.09], 13);
    }
  
    onAdressSubmit(form) {
      console.log(form.value.adress);
    }
  }
  </code></pre>
  
  <p>and inside the <code>app.component.html</code> I have a section with an id of map.</p>
  
  <p>All I see is this:
  <img src="https://i.ibb.co/GPgKZhG/leaflet.jpg" alt="leaflet"></p>
  
  <p>Does someone know where the problem lies and how to fix it? </p>
  
  <p>Help would be much appreciated. :)</p>