Why Does Tsconfig Need To Compile Javascript Files Angular

Question

I would like to use canvasjs for some charts on an Angular project that i'm making (https://canvasjs.com/angular-charts/)

To do so i have downloaded their javascript file and imported it into one of my component as suggested.

import * as CanvasJS from './../../../assets/canvasjs.min.js';

However I sometimes receive when I try to run my application using npm start

ERROR in src/app/Components/multi-camera-view/multi-camera-view.component.ts(2,27): error TS6143: Module './../../../assets/canvasjs.min.js' was resolved to '/src/assets/canvasjs.min.js', but '--allowJs' is not set.

After a quick bit of reading, allowJs allows the ts compiler to compile javascript files, but why the heck does it need to compile those if they're already in javascript?

Browsers can't read typescript but they can read javascript. So why does it need to compile it?

I tried adding the allowJs flag in my tsconfig.json file at the root

{ "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "allowJs": true, "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } }

But then i just got the error:

ERROR in error TS5055: Cannot write file '/src/assets/canvasjs.min.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.

I visited the link and set noEmit to true, but then my application would build fine but wouldn't run. So, what's the best way to use this javascript file?

Thanks!

Fenton · Accepted Answer · 2018-12-06 11:34:35Z

The --allowJS flag allows the compiler to infer the type information from the JavaScript file so it can type-check your use of that file.

It may not be as rich as the type information from a TypeScript file, but it does a pretty good job of working out type information in most cases.

So it's not to convert JavaScript into yet more JavaScript, but to make your TypeScript code that depends on JavaScript easier to manage.

How do i add it then without overwriting it? it sounds as if all files that are compiled are written somewhere, but im not sure how angular handles it.
I always use allowJS alongside the outDir flag - so the output is never placed in the source folders. It's cleaner this way in any case.
i do have an outDir flag so i have no clue why it's still claiming it's being overridden

Dale Baker · Accepted Answer · 2018-12-08 03:16:25Z

I spent a lot of time on this.

So I had allowJs set in my tsconfig.json at the root. This resulted in the compile error. Despite setting an outDir, I still had issues with overwriting.

Turns out the tsconfig.json at the root is not the place to set allowJs.

In my src/tsconfig.app.json I set allowJs to be true and it then worked successfully.

faizan atif masood · Accepted Answer · 2021-12-10 18:17:05Z

If you get Error while using canvas.js in angular

In tsconfig.app.json File

add

"allowJs":true;

Collectives™ on Stack Overflow

Why Does Tsconfig Need To Compile Javascript Files Angular

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related