时间戳

首页 > 解决方案 > 将第 3 方 JS 插件安装到 Angular 7 中

angular - 将第 3 方 JS 插件安装到 Angular 7 中

问题描述

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

任何人都可以建议更好的过程。

declare var readXlsxFile: any;

在 angular.json

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

或者

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

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

你能否解释一下这个问题背后的概念。

标签： angulartypescriptpluginsecmascript-6

解决方案

包含 3rd 方库时，有两部分...您要执行的 javascript 代码，以及为 IDE 提供强类型优势的定义文件。

显然，如果应用程序要运行，第一个必须存在。<script src="thirdLib.js">最简单的方法是在托管 Angular 2 应用程序的 html 页面中包含带有标签的 3rd 方库。这不会给你定义，所以你不会有 IDE 的优点，但应用程序会运行。（要阻止 IDE 抱怨它不知道变量“thirdLib”，请添加declare var thirdLib:any到您的 ts 文件中。因为它是类型any的 IDE 不会为 thirdLib 提供代码完成，但它也不会抛出 IDE 错误。 )

要获得执行代码和定义，如果 lib 是用 Typescript 编写的，您可以使用import {thirdLib} from 'thirdLibfolder/thirdLib'. lib 的 ts 文件本质上具有执行代码和打字稿定义。

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

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

额外的链接。 https://github.com/angular/angular-cli/wiki/3rd-party-libs

推荐阅读