在Angular2项目中将多个第三方库导入到相同的命名空间中

Question

我正在使用Angular2制作一个项目。该项目使用Angular-CLI（1.0.0-beta.17）生成，并使用Angular v2.0.0和TypeScript。

在这个项目中，我想导入Leaflet（1.0.1）和Leaflet.VectorGrid（1.0.2）。

我用npm

安装它们

npm install leaflet
npm install leaflet.vectorgrid

Leaflet有@types定义，所以我也安装了

npm install @types/leaflet

Leaflet.VectorGrid但没有@types定义，所以我添加

declare module 'leaflet.vectorgrid';

改为我的typings.d.ts文件。

但是，如何将两个模块导入项目文件中的同一命名空间？

如果我尝试：

import * as L from 'leaflet';
import * as L from 'leaflet.vectorgrid';

由于重复的标识符，这在逻辑上会抛出编译错误。 使用不同的别名导入它们，例如：

import * as L from 'leaflet';
import * as LVG from 'leaflet.vectorgrid';

不起作用，因为Leaflet.VectorGrid扩展了全局L对象，所以

LVG.vectorGrid(...)

失败。

任何帮助将不胜感激。感谢。

Answer 1

一种解决方案是使用脚本标记将两个库都导入全局范围。然后添加

declare var L: any;

进入需要使用.ts的{​​{1}}文件中。然而，这并不理想，因为L不是真正的类型，并且打字稿编译器不会进行任何验证。

为了能够将两个库与类型一起使用，必须为L库编写一个类型定义，据我所知，它现在不存在，然后将两个对象合并为一个

Answer 2

我认为require（＆＃39; path / to / library＆＃39;）可以使用，你可以在打字稿中使用它。

require('node_modules/leaflet/leaflet-xxxxx.js');

您还可以使用require方法

包含Leaflet

var L = require('node_modules/leaflet/dist/leaflet-src.js');