angular - 使用生产构建时的 ngx-leaflet angular 5 地图图块问题

Question

我对 Angular 很陌生，并使用传单插件构建了我的第一个 Angular 应用程序。在使用生产构建之前，一切都按预期工作：

ng s --target=production 或者 ng build --target=production

传单地图容器并非显示所有地图图块和/或错误的行、列。我试图用 map.invalidateSize() 强制地图重绘；在 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"
  ],

score 2 · Accepted Answer

您可能缺少位于./node_modules/leaflet/dist/leaflet.css. 如果缺少该选项，则会绘制地图和图块，但它们的布局不正确。

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

1 回答 1