首页 文章

如何使用Angular 5 CLI加载第三方库？

提问于
浏览 次
2

我试图通过配置global scripts在我的Angular 5应用程序中使用第三方库 . 这个问题概述了我想要做的事情，尽管我认为这可能是在Angular 4：Loading third party library with Angular-cli

我试图使用的库是shpjs，所以我的脚本属性是：

"scripts": [
    "../node_modules/shpjs/dist/shp.js"
  ],

该应用程序构建正常，但我的index.html中没有我的库 . 根据文件：

这些将被加载，就像您已将它们添加到index.html内的标记中一样

Is there another step that I am missing?

***Update: ***
我有其他问题，我终于解决了 . 总而言之，我的脚本配置是正确的，但我的组件中的import语句不是，我将一个问题与另一个问题混为一谈 .

在我的 component.ts 中，我添加了 import * as shp from 'shpjs';

然后我的组件上的测试功能工作得很好：

openAsGeoJson(url: string) {
    url = 'http://calvinmetcalf.github.io/shapefile-js/files/TM_WORLD_BORDERS_SIMPL-0.3.zip';


    shp(url).then(function (data) {
      if (data) {
        console.log('shapefile data received');
        console.log(data.length);
        console.log(data);
      }

    });
  }

我的环境：

Angular CLI: 1.6.3
Node: 7.10.1
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.3
angular angular-cli angular5

1 回答

  • 4

    它没有按原样添加到 index.html .

    <script src="../node_modules/shpjs/dist/shp.js" />

    它被添加到 scripts.bundle.js

    index.html 中会有一个脚本标记，如下所示，

    <script type="text/javascript" src="scripts.bundle.js"></script>

    shp.js 文件将成为 scripts.bundle.js 的一部分，打开此文件即可找到 shp.js 内容 .

    回复于

相关问题