13

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.

Ameya
  • 1,914
  • 4
  • 29
  • 55
  • Could you add exactly how you are importing jsplumb in your component? It looks like you are trying to import the node_module using the file path. – Ben Jan 23 '18 at 23:52
  • Looks like it is a bug from angular-cli for angular 5 webpack, I have give the steps to recreate in https://github.com/angular/angular-cli/issues/9290. Blocker due to https://github.com/angular/angular/issues/21080 – Ameya Jan 25 '18 at 04:47
  • 2
    can you paste your tsconfig? – Luca Taccagni Jan 26 '18 at 10:30
  • { "compileOnSave": false, "compilerOptions": { "allowJs":true, "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } } – Ameya Feb 01 '18 at 04:49
  • I'm facing the exact same issue. The work around works for me at the moment. – Rodrigo Feb 02 '18 at 16:57
  • An update the issue is closed on git I don't see any public/stable release yes, could be in beta. – Ameya Feb 07 '18 at 09:27

2 Answers2

0

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?

Gustavo Lopes
  • 3,794
  • 4
  • 17
  • 57
0

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

ng update @angular/cli
mruanova
  • 6,351
  • 6
  • 37
  • 55