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

Question

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

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.

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.

As per tsconfig FAQ

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

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

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

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.

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.

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.

Answer 1

If you're trying to import a library to Angular 2+, you should do it inside angular-cli.json .

There you have a scripts key where you should configure the desired imports. They are generally like:

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

Also you can import the library (not recommended) inside your main index.html , using <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

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

ng update @angular/cli