Broken leaflet map with Angular-CLI and yaga. Where to insert leaflet.css?

Question

I'm trying to display a simple leaflet-map by using the yaga component (npm yaga-module). Therefore I generated a new project with angular cli and followed the introduction on the npm page. In the end, I got a broken map.

Image of the broken map.

I already implemented a working map with the leaflet library + JS and even with yaga in the ionic framework. In both cases I get the same broken map, if I remove the link to the leaflet.css. But where do I have to link the css file? If I insert the path in my .angular-cli.json, it seems to be loaded successfully. But then my map disappears completely.

Did I make a mistake? You can find my code below:

app.module.ts:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { YagaModule } from '@yaga/leaflet-ng2';

    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        YagaModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app.component.ts:

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

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'Test';
    }

app.component.html:

<h1>{{title}}</h1>
<yaga-map [zoom]="2">
    <yaga-tile-layer [url]="'http://a.tile.osm.org/{z}/{x}/{y}.png'"></yaga-tile-layer>
</yaga-map>

My app.component.css file is empty. Any ideas what's going wrong?

Answer 1

In your styles.css add the following line of code

@import '../node_modules/leaflet/dist/leaflet.css'