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

Question

我试图通过配置全局脚本在Angular 5应用程序中使用第三方库。 尽管我认为这可能是在Angular 4： 使用Angular-cli加载第三方库，但该问题概述了我正在尝试做的事情

我要使用的库是shpjs，所以我的scripts属性是：

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

该应用程序可以正常运行，但是index.html中没有我的库。 根据文档：

这些文件将完全按照您已将它们添加到index.html内的标记中的方式进行加载

我还缺少其他步骤吗？

*更新：*
我还有其他问题，最后得到解决。 综上所述，我的脚本配置是正确的，但是组件中的import语句不正确，并且我将一个问题与另一个问题混为一谈。

在我的component.ts ，我import * as shp from 'shpjs';添加了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

Answer 1

它不会按原样添加到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内容。