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由传单设置，然后Minimap插件确保L.control.minimap

然后在代码中

import * as L from "leaflet";

之后

L.control.minimap

未定义

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

我已经检查过并且leaflet.js源文件初始化了两次，而这条线是第二次执行它＆lt;为什么不仅仅是类型??

import * as L from "leaflet";

ng -v =＆gt;

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变量的插件在这种情况下，您必须将整个Leaflet模块导入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/

Angular或webpack正在加载传单库两次

1 个答案: