Including external js with allowJs for Angular 5

[ameya]

Versions

Angular CLI: 1.6.1

Angular CLI: 1.6.1
Node: 9.3.0
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.1
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.4.2
webpack: 3.10.0

Repro steps

• Step 1 ng new AppName

• Step 2 npm jsplumb install --save

• Step 3 Add import to angular-cli
  "styles": [
  "../node_modules/jsplumb/dist/css/jsplumbtoolkit-defaults.css",
  "styles.css"
  ],

  and
  
  "scripts": ["../node_modules/jsplumb/dist/js/jsplumb.js"],
  

• Step 4 Include jsplumb in app.component.ts
  import { jsPlumb } from '../../../node_modules/jsplumb/dist/js/jsplumb.js';

• Step 5 ng build or ng serve to compile and/or build application.

Observed behavior

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.

### Desired behavior
<!--
What would like to see implemented?
What is the usecase?
What did you expect to see?
-->
Should build angular application with external js file.

### Mention any other details that might be useful (optional)
tsconfig.json
{
  "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"
    ]
  }
}

[Stackoverflow ](https://stackoverflow.com/questions/48219888/issue-adding-third-party-external-js-lib-in-angular5)

[clydin]

The scripts option is meant for JS scripts that would otherwise be included as a script element in HTML. In this case the package is being imported directly so that is not needed.

Within the app code, the import module specifier should also be jsplumb and not '../../../node_modules/jsplumb/dist/js/jsplumb.js'.

[vladimiry]

see here #8930

[ameya]

Hi @clydin ,
What should the import statement look like? I am a bit new to angular pardon me if asking a naive question.

if it is like

import * as jsplumb from '../../../node_modules/jsplumb/dist/js/jsplumb.js';

then using jsplumb.getInstance or any function does not work as it won't be recognised. Anything else I should do to make a object of jsplumb js file ?

Another observation is if I change the class name to the jsfile name that is as you said jsplumb with the same import (import { jsplumb } from '../../../node_modules/jsplumb/dist/js/jsplumb.js'; erlier it was jsPlumb) gives the following error with and without allowJs configuration.

error TS2305: Module '"D:/myproj/myapp/node_modules/jsplumb/dist/js/jsplumb"' has no exported member 'jsplumb'.

The jsplumb is not a TS file but a js one.

Hi @vladimiry ,
Seems some PR is in progress for issue #8930 so does it mean once this gets merged the issue will be fixed and adding allowJs will work as expected?

Meantime is there any alternative to ng builds the application without the error?

[vladimiry]

this issue seems to be a duplicate of this angular/angular#21080

[clydin]

Ok. The typings provided with the package don't appear to be correct. But this appears to work: You'll need to use the script configuration shown in the original report and then in TS:

import { jsPlumbInstance } from 'jsplumb';

declare var jsPlumb: jsPlumbInstance;

jsPlumb.ready(() => {
  const test = jsPlumb.getInstance();
});

[ameya]

I have tested out the newer version of cli that is 1.6.8 but still, the issue is not resolved. Followed the steps mentioned in this link to upgrade

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}