在angular5中添加第三方(外部)js lib的问题

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.

使用"allowJs":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 FAQ

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

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

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

让我知道是否有人试图用新的角度cli包含外部js并面临同样的错误,同样的解决方案是什么.

没有任何附加选项添加到tsconfig.json,如果我尝试修改任何ts文件,应用程序将成功编译,我能够工作.但是,在运行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"
    ],
    ...
}

您也可以在 main 中导入库（不推荐）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，如何添加或捆绑外部js文件？