Question

我正在尝试将read-excel-file JS插件导入angular 7项目。我尝试了网站上介绍的所有方法，但都失败了。

任何人都可以提出更好的过程吗？

declare var readXlsxFile: any;

在angular.json中

        "scripts": [
          "node_modules/read-excel-file/commonjs/readXlsxFileBrowser.js"
        ]

OR

       "scripts": [
          "node_modules/read-excel-file/bundle/read-excel-file.min.js"
        ]

但是没有任何效果。我能够获取readXlsxFile函数及其执行的功能，但是在代码内部，它调用了另一个模块。如何加载那些依赖模块？

能否请您解释问题背后的概念。

Answer 1

包括第3方库时，分为两部分：您要执行的javascript代码，以及使IDE具备所有强类型优点的定义文件。

很明显，如果要运行该应用程序，则必须存在第一个。最简单的方法是在托管Angular 2应用程序的html页面中包含带有<script src="thirdLib.js">标签的3rd party库。那不会得到您的定义，因此您不会具有IDE优点，但是该应用程序将运行。（要阻止IDE抱怨它不知道变量'thirdLib'，请将declare var thirdLib:any添加到您的ts文件中。由于它的类型为any，因此IDE将不会为thirdLib提供代码完成功能，但它也不会引发IDE错误。）

要获取执行代码和定义，如果该库是用Typescript编写的，则可以使用import {thirdLib} from 'thirdLibfolder/thirdLib'从代码中添加对该ts文件的引用。 lib的ts文件本质上具有执行代码和打字稿定义。

如果该库不是用Typescript编写的，但是有些好心人为它编写了thirdLib.d.ts定义文件，则可以在ts文件中使用/// <reference path="thirdLibfolder/thirdLib.d.ts" />引用d.ts文件。然后仍然将实际执行的javascript包含在上面提到的脚本参考中。

这些文件的位置以及是否在参考文件中包括扩展名，都特定于项目设置以及所使用的捆绑程序和构建工具。 Webpack将在node_modules文件夹中搜索import {...中引用的库，并接受扩展名为.ts且不带扩展名的引用。如果您包含.ts扩展名，流星将抛出错误。

其他链接。 https://github.com/angular/angular-cli/wiki/3rd-party-libs

将3rd Party JS插件安装到angular 7中

1 个答案: