Créer un map avec angular 5 et leaflet js

Bonjour,
j'ai un problème avec mon map. J'utilise angular 5, leaflet , semantic-ui.
app.components.ts:

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{
  title = 'app';
ngOnInit() {

      // Déclaration de la carte avec les coordonnées du centre et le niveau de zoom.
      const map = L.map('map').setView([-18.8851432, 47.5361300], 6);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: 'MAP'
      }).addTo(map);

    }
}

app.components.html

<div class="twelve wide column" id="map">
 </div>

et j'ai suivi tous les config necessaires mais le map n'est pas affiché correctement