Typescript compiler cannot skip imported js file

Question

I just started typescript with angular2 and I ran into the following problem. I started with the angular2 quickstart project and it worked fine until I tried to import a simple javascript file. I use the import statement as follows

import * as myModule from './mymodule.js'; 

I also added allowJs: true to the tsconfig.json file to accept the javascript file as an import. The following compilation gives the following error:

Error TS5055: Cannot write the file '... / mymodule.js' because it will overwrite the input file.

As far as I understand, the typescript compiler should not compile this file because it is already in javascript, but for some reason I cannot exclude this from compilation.

I tried adding the file to the exclude: [] array in tsconfig.json, but since it was imported into one of my .ts files, this is not taken into account (at least what I understood from the typescript docs).

My question is: how can I compile my project with this file? Is there a parameter that I am missing? Or is there something wrong with my approach?

Any help or advice is appreciated as it starts to infuriate me.

Additional Information

I am using the following tsconfig file:

 { "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true } } 

I build my project with

 npm run build 

from the console. What is the script in the package.json file that looks like this:

 "scripts": { "build": "tsc -p src/", ... 

After the modifications suggested by @Seamus below, the same error occurs.

But

if i just started the console

 tsc -p src/ 

The error I get is different:

error TS7016: Could not find declaration file for module 'mymodule'

It looks like it finds a module if I do it manually, but then the question arises: why doesn’t it work with npm run build ? Is this something different?

Answer 1

The allowJs compiler option will be:

Allow compilation of JavaScript files.

For commonjs you'll need a module declaration as follows:

mymodule.d.ts

 declare module "mymodule"; 

And in your source where you import:

 /// <reference path="mymodule.d.ts"/> import * as myModule from 'mymodule'; 

See "Working with Other JavaScript Libraries" in the documentation.

Answer 2

Ok, I know this is old, but I had this problem, and I think I figured out how this happens (perhaps partly due to an Angular update).

To get started:

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

Running ng serve --aot or ng build --watch=auto --aot You should see the above error and will not be able to access your site.

Open one of the .ts files, which is part of your application, and make a small change (for example, adding one place), and then save the file.

Your application must compile!

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