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

【问题标题】：ngx-leaflet angular 5 map tiles issue when using production build使用生产构建时的 ngx-leaflet angular 5 地图图块问题
【发布时间】：2018-02-15 09:10:48
【问题描述】：

我对 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"
  ],

【问题讨论】：

听起来好像缺少 Leaflet CSS 文件。见stackoverflow.com/questions/48579677/…
正如@ghybs 所说，它可能缺少leaflet.css。 ngx-leaflet README 讨论了包含 css 文件的一些不同方法，具体取决于您的构建系统：github.com/Asymmetrik/ngx-leaflet#import-the-leaflet-stylesheet

标签： angular leaflet ngx-leaflet

【解决方案1】：

您可能缺少位于./node_modules/leaflet/dist/leaflet.css 的leaflet.css 文件。缺少时，地图和图块会被绘制，但布局不正确。

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

https://github.com/Asymmetrik/ngx-leaflet#import-the-leaflet-stylesheet

【讨论】：

感谢@reblace 为我指明了正确的方向。最初忘记提及我在 angular-cli.json 中有传单 css 参考 - 请参阅已编辑的问题。最后，这解决了我现在的问题，我在 src/style.css @import "~leaflet/dist/leaflet.css"; 中添加了leaflet.css，不确定这是否是正确的位置。使用 webpack 时，ngx-leaflet README 正在讨论 vendor.ts 文件——但我在当前的 angular 5 项目中没有这样的文件。再次感谢！
我不确定你是否看到了这个：asymmetrik.com/ngx-leaflet-tutorial-angular-cli 这是一个指导你让 Leaflet 与 ng-cli 一起工作的教程，还有一个 GitHub 存储库和一个工作示例。展示如何正确设置 css 和东西。
值得一提的是，angular.json（你添加样式路径的地方）不是ng serve的监视模式。要查看更改，您需要再运行一次 ng serve。