Compiling JavaScript files in Angular 5 CLI project

Question

I have a problem compiling (including) JavaScript files in Angular 5.0.0 CLI project.

I am performing the following steps:

Create an empty CLI (1.6.2) project (ng new test2). The project runs fine.
Modify tsconfig.json to include the line allowJs": true, to compile/bundle Javascript files
Create a simple Javascript file (eg test.js with content i=1;) in the app folder.
Build fails in Angular 5 with the error below.

Angular 5 error

"ERROR in error TS5055: Cannot write file 
'/Users/user/Documents/workspace/test2/src/app/test.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."

In Angular 4 JS file is compiled to the output directory specified in the outDir parameter and included in the final bundle.

ng --version is giving the following:

Angular CLI: 1.6.2
Node: 6.10.0
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

outDir is set to "./dist/out-tsc" in tsconfig.json and "../out-tsc/app" in tsconfig.app.json.

Any thoughts anyone. Regards Dave

neoncube neoncube · Accepted Answer · 2017-12-26T07:49:04

I ran into this issue recently and am happy to report that I think I have a solution!

To start:

Upgrade your Angular to the latest version (5.1).
Upgrade your TypeScript to the latest supported version (4.*, as of the time of the writing -- not 5.*)
You probably need allowJs: true in your config file.

Run ng serve --aot or ng build --watch=auto --aot You should see the above error and be unable to access your site.

Open one of the .ts file that's part of your app and make a small change (such as adding a single space) and then save the file.

Your app should compile!

(The --watch=auto and --aot flags are critical for this workaround, as far as I can tell)

Compiling JavaScript files in Angular 5 CLI project

3 Answers