为 Angular 2+ 导入传单答案

【问题标题】：Importing Leaflet for Angular 2+为 Angular 2+ 导入传单
【发布时间】：2017-06-21 10:55:15
【问题描述】：

我是 Angular 2 的新手，正在寻找使用 Angular 2 设置 Leafletjs 所涉及的步骤。希望避免将 JS 和 CSS 包含到我的 index.html 中。它不应该被全局导入，因为我正在构建一个小部件。

非常感谢任何帮助。

【问题讨论】：

有angular2-leaflet-starter，但他们不使用angular-cli。我使用了mapbox-gl，一旦我弄清楚如何在组件中获取它就很容易了，不幸的是我不得不将它直接导入到我的组件中，例如const mapboxgl = require('../../../node_modules/mapbox-gl/dist/mapbox-gl.js');和const Map = mapboxgl.Map。
我猜你想要这个作为一个全局包。当您在项目的根文件夹中时，使用以下命令安装软件包：npm install leaflet --save。安装包后，您应该能够在 angular-cli.json 中的以下部分输入样式和脚本文件的路径：“styles”：[] 和“scripts”：[]。
谢谢。虽然它不是全球性的。我正在制作一个小部件，所以我需要将它导入到特定的模块/组件中。我之前还没有真正导入外部库。我需要使用 require() 吗？
@BBaysinger 更新了我的回复，我从未使用过传单，但我认为应该可以。
你试过npm install @types/leaflet --save吗？我对此仍然很陌生，但是像这样引用the DefinitelyTyped repository 似乎可以正确设置库。我是having a harder time with plugins。

【解决方案1】：

首先使用安装包 npm install leaflet --save 当您在项目的根文件夹中时。

我希望将 Leaflet 作为一个全局包：

安装包后，您应该能够在 angular-cli.json 中的以下部分输入样式和脚本文件的路径："styles": [] 和 "scripts": []

您可以在angular-cli project page 上阅读更多相关信息。

如果要将包导入到现有模块中

在你的模块顶部写：

import leaflet from 'leaflet';

【讨论】：