在 angular5 中添加第三方(外部)js 库的问题 [英] Issue adding third-party (external ) js lib in angular5

问题描述

我正在努力添加带有 angular 5 应用程序的 jsplumb 社区 js 库版本(Angular CLI:1.6.1).

I am working on to add jsplumb community js library version with the angular 5 application (Angular CLI: 1.6.1).

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

With the first build without any configuration to tsconfig.json I get the following error.

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 得到以下错误

With "allowJs":true in the tsconfig.json get the following error

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 常见问题

As per tsconfig FAQ

为什么我会收到错误 TS5055:无法写入文件 'xxx.js' 因为它会覆盖输入文件.

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

with an outDir ("outDir": "./dist/out-tsc") this issue should be resolved. This is already set in my tsconfig.

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

If we add noEmit to true it simply builds the application, not including any js we get a blank white screen.

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

Let me know if anyone has tried to include external js with new angular cli and face the same kind of error and what is the solution for the same.

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

Without any additional option added to tsconfig.json if I try to modify any ts file the application will compile with success and I am able to work. But this does not help while running ng build, to create a deployable binary.

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

Update Workaround: until the fix in CLI is available. For development (ng serve) remove allowJs from tsconfig.json, when ever you get an error with adding allowJs simply modify a ts file to recompile the applicaiton, this time will compile with success. For production or distribution add back the allowJs to tsconfig.json run the application run with ng build --prod --watch=auto you should see the error about overriding the JS file in node_module, simple modify a ts file it should rebuild as --watch=auto is there in command but this time with sucess.

推荐答案

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

have you tried upgrading it to angular 6? maybe they fixed this in the new version.

ng update @angular/cli

这篇关于在 angular5 中添加第三方(外部)js 库的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！