在 angular5 中添加第三方（外部）js 库的问题

Posted 2023-02-22

【中文标题】在 angular5 中添加第三方（外部）js 库的问题

【英文标题】：Issue adding third-party (external ) js lib in angular5

【发布时间】：2018-06-21 12:57:17

【问题描述】：

我正在努力为 Angular 5 应用程序（Angular CLI：1.6.1）添加 jsplumb 社区 js 库版本。

第一次构建时没有对 tsconfig.json 进行任何配置，我收到以下错误。

ERROR in src/app/jsplumb/jsplumb.component.ts(4,25): error TS6143: Module '../../../node_modules/jsplumb/dist/js/jsplumb.js' was resolved to 'D:/myproj/angular5/myapp/node_modules/jsplumb/dist/js/jsplumb.js', but '--allowJs' is not set.

在 tsconfig.json 中使用 "allowJs":true 得到以下错误

ERROR in error TS5055: Cannot write file 'D:/myproj/angular5/myapp/node_modules/jsplumb/dist/js/jsplumb.js' because it would overwrite input file.
  Adding a tsconfig.json file will help organize projects that contain both TypeScript and javascript files. Learn more at https://aka.ms/tsconfig.

根据 tsconfig 常见问题解答

Why am I getting the error TS5055: Cannot write file 'xxx.js' because it would overwrite input file.

使用 outDir ("outDir": "./dist/out-tsc") 应该可以解决此问题。这已经在我的 tsconfig 中设置了。

如果我们将 noEmit 添加为 true，它只会构建应用程序，不包括任何 js，我们会得到一个空白屏幕。

让我知道是否有人尝试将外部 js 包含在新的 angular cli 中并遇到相同类型的错误，以及相同的解决方案是什么。

如果我尝试修改任何 ts 文件，如果没有向 tsconfig.json 添加任何其他选项，应用程序将成功编译并且我能够工作。但这在运行 ng build 以创建可部署的二进制文件时无济于事。

更新解决方法：直到 CLI 中的修复可用。对于开发（ng serve），从 tsconfig.json 中删除 allowJs，当你在添加 allowJs 时遇到错误时，只需修改 ts 文件以重新编译应用程序，这一次将编译成功。对于生产或分发，将 allowJs 添加回 tsconfig.json 使用ng build --prod --watch=auto 运行应用程序，您应该会看到有关在 node_module 中覆盖 JS 文件的错误，只需修改它应该重建的 ts 文件，因为 --watch=auto 在命令，但这次成功了。

【问题讨论】：

您能否准确添加在组件中导入 jsplumb 的方式？看起来您正在尝试使用文件路径导入 node_module。

看起来这是一个来自 angular-cli 的错误，用于 Angular 5 webpack，我已经在github.com/angular/angular-cli/issues/9290 中给出了重新创建的步骤。由于github.com/angular/angular/issues/21080

导致的阻止程序

你能粘贴你的 tsconfig 吗？

"compileOnSave": false, "compilerOptions": "allowJs":true, "outDir": "./dist/out-tsc", "sourceMap": true, "declaration":假，“moduleResolution”：“节点”，“emitDecoratorMetadata”：真，“experimentalDecorators”：真，“目标”：“es5”，“typeRoots”：[“node_modules/@types”]，“lib”：[“es2017 ", "dom" ]

我面临着完全相同的问题。目前，解决方法对我有用。

【参考方案1】：

如果您尝试将库导入 Angular 2+，您应该在 angular-cli.json 中进行。

您有一个scripts 键，您应该在其中配置所需的导入。它们通常是这样的：

    ...
    "scripts": [
        "../node_modules/MODULE/file.js"
    ],
    ...

您还可以使用<script src="/path_relative_to_root/file.js"> 在主index.html 中导入库（不推荐）

https://github.com/angular/angular-cli/wiki/angular-cli

https://github.com/angular/angular-cli/wiki/stories-global-scripts

Angular Cli Webpack, How to add or bundle external js files?

【参考方案2】：

您是否尝试将其升级到 Angular 6？也许他们在新版本中修复了这个问题。

ng update @angular/cli