为什么 Tsconfig 需要编译 Javascript 文件 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!

Answer 1

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.

Answer 2

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.

Answer 3

If you get Error while using canvas.js in angular

In tsconfig.app.json File

add

"allowJs":true;