Question

我正在使用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.

使用＆＃34; allowJs＆＃34;：在tsconfig.json中为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（＆＃34; outDir＆＃34;：＆＃34; ./ dist / out-tsc＆＃34;）此问题应该得到解决。这已在我的tsconfig中设置。

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

让我知道是否有人试图将外部js包含在新的角度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是有命令，但这次是成功的。

Answer 1

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

您有一个scripts键，您应该在其中配置所需的导入。他们通常喜欢：

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

您也可以使用index.html

在主<script src="/path_relative_to_root/file.js">内导入库（不推荐）

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?

Answer 2

您是否尝试过将其升级到角度6？也许他们在新版本中解决了这个问题。

ng update @angular/cli

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

2 个答案: