angular - 使用生产版本时 ngx-leaflet angular 5 map tiles 问题

我是 Angular 的新手，使用传单插件构建了我的第一个 Angular 应用程序。在使用生产构建之前，一切都按预期工作:

ng s --target=production 要么 ng build --target=production

传单 map 容器未显示所有 map 图 block 和/或显示在错误的行、列中。我试图用 map.invalidateSize(); 强制重绘 map ；在 onMapReady(..) 但没有成功。

(leafletMapReady)="onMapReady($event)

组件本身根据 *ngIf 条件显示:

<div>
    <app-tracking-map *ngIf="deliveryState == 1" [trackingData]="trackingData"></app-tracking-map>
</div>

我实际上不知道从哪里开始调查，只是猜测它与 webpack 和神奇的捆绑相关。

在 angular-cli.json 中我添加了传单 css

      "styles": [
    "styles.css",
    "../node_modules/leaflet/dist/leaflet.css"
  ],

最佳答案

您可能缺少位于 ./node_modules/leaflet/dist/leaflet.css 中的 leaflet.css 文件。如果缺少它，则会绘制 map 和图 block ，但它们的布局不正确。

如何在 Webpack 构建中引用该文件取决于您如何设置项目。 ngx-leaflet 自述文件描述了一些最常见的配置:

关于angular - 使用生产版本时 ngx-leaflet angular 5 map tiles 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48803497/