带有 Angular-CLI 和 yaga 的破碎传单地图。在哪里插入leaflet.css？

Question

我正在尝试使用 yaga 组件（npm yaga-module）显示一个简单的传单地图。因此，我使用 angular cli 生成了一个新项目，并按照 npm 页面上的介绍进行操作。最后，我得到了一张破地图。

破损地图的图像。

我已经使用传单库 + JS 甚至在离子框架中使用 yaga 实现了一个工作映射。在这两种情况下，如果我删除了leaflet.css 的链接，我都会得到相同的破损地图。但是我必须在哪里链接 css 文件？如果我在.angular-cli.json 中插入路径，它似乎已成功加载。但随后我的地图完全消失了。

我做错了吗？你可以在下面找到我的代码：

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：

    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.css文件是空的。任何想法出了什么问题？

Answer 1

在你的styles.css 中添加以下代码行

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