角或webpack两次加载传单库。

Question

有装载传单和它的一个插件：

npm i leaflet
npm i @types/leaflet
npm i leaflet-minimap

并将它们包含在.angular-cli.json的脚本中。

  "scripts": [
    "../src/assets/js/break-on.js",
    "../node_modules/leaflet/dist/leaflet.js",
    "../node_modules/leaflet-minimap/src/Control.MiniMap.js",

引用传单库重新加载整个src文件，这将覆盖全局L对象上的插件。

因此，在初始化时：

L.control是通过传单建立的，然后通过微图插件确保L.control.minimap。

然后在代码中

import * as L from "leaflet";

在那之后

L.control.minimap

未定义

我不确定这是一个角的，角-cli，webpack或传单的问题。

我已经检查过并初始化了两次leaflet.js源文件，第二次这样做的是这一行--为什么这不仅仅是类型？？

import * as L from "leaflet";

ng -v =>

Angular CLI: 1.7.3
Node: 8.10.0
OS: win32 x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0
leaflet: 1.3.1

第一个源是scripts.bundle，第二个源是vendor.bundle

Answer 1

修改全局L变量的插件，在本例中，您必须将整个传单模块导入L，然后导入插件库以避免副作用。以下摘自传单路径转换示例的片段说明了这一点：

import { Component } from '@angular/core';

// Import Leaflet into L 
import * as L from 'leaflet';

// Import the plugin libraries so they will modify L
import 'leaflet-path-transform';
import 'leaflet-path-drag';

@Component({
...

摘自：https://www.asymmetrik.com/ngx-leaflet-and-leaflet-plugins/