这是关于Webpack和Leaflet之间的兼容性问题。你可能已经知道（针对此问题的github Issue，SO-Question1，SO-Question2 npm插件，ngx-leaflet自述文件）传单以与webpack不兼容的方式操纵其URL到图像。如果不固定，它们会生成无意义的网址，例如http://localhost:8000/static/frontend/marker-icon.2b3e1faf89f94a483539.png%22)marker-icon.png与相对http://localhost:8000/static/frontend/marker-icon.2b3e1faf89f94a483539.png。我可以在开发环境中使用一些解决方案来解决此问题，但不能在产品构建中解决。

我只有一个组件，除了构建传单 map之外，什么也不做。我已经尝试过给出的答案，我已经尝试过插件，但是我的构建中没有标记。

我该怎么办？我怎么了

我的设定

通常，我会尝试在django后端服务器上部署angular。“ / api”下的所有URL都属于后端API，“ / frontend”下的所有URL都属于我的Angular前端。

Leaflet导入了my angular.json，但仅导入了其js文件。

//angular.json
...
            "styles": [
              "src/styles.scss",
              "node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/leaflet/dist/leaflet.js",
              "node_modules/tinymce/tinymce.min.js"
            ]
...

旁注：我目前没有使用ngx-leaflet，因为我没有找到理由。但是，我确实阅读了使用ngx-leaflet的修复程序，因为据我了解，问题在于一般的webpack-leaflet交互。

在我的组件中，我导入带有的传单import * as L from "node_modules/leaflet";以及其Marker类（尤其是）import { Marker } from 'leaflet';。不使用下面的任何修补程序ng serve，都不会启用标记，而在中则不会ng build --prod。

现在到我的每一个解决方案的结果。我查看了同时使用ng serve和的所有解决方案ng build --prod，后者在django后端服务器的开发环境中运行。在解决方案3中，它们始终具有相同的结果：

1.使用leaflet-defaulticon-compatibility-plugin

//leaflet-map.component.ts
import { Marker } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
import * as L from "node_modules/leaflet";
import 'leaflet-defaulticon-compatibility';

这将标准标记的url更改为“未定义”： 标记根本没有加载。

2.明确设置默认图标图像资源

//leaflet-map.component.ts
import { Marker } from 'leaflet';
import * as L from "node_modules/leaflet";

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

这导致URL的一部分被对象替换：

产品中的行为相同。标记确实加载了，你可以看到带有“未找到文件”符号的图像的轮廓。

3.将传单图像添加到资产中，并直接在图标中引用它们（也在ngx-leaflet自述文件中建议）

//leaflet-map.component.ts
import { Marker } from 'leaflet';
import * as L from "node_modules/leaflet";

...
  //My function to create markers on my map
  createDefaultMarker(mapMarker: MapMarker): Marker{
    return L.marker([mapMarker.latitude, mapMarker.longitude], {
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'assets/marker-icon.png',
      shadowUrl: 'assets/marker-shadow.png'
    })

//angular.json
...
            "assets": [
              "src/favicon.ico",
              "src/assets",
              { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" },
              { "glob": "**/*", "input": "node_modules/leaflet/dist/images", "output": "assets/"}
            ],
...

正在使用：标记本身是可见的。无法从错误的网址加载marker-shadow.png且名称中没有必要的哈希值失败：

在ng build --prod上：具有marker_icon和marker_shadow的废话URL：