CODEWITHSUNDEEP
javascriptangulartypescript
Dale Baker
Dale Baker

Reputation: 339

Why Does Tsconfig Need To Compile Javascript Files Angular

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!

Upvotes: 3

Views: 2174

Answers (4)

CyberT33N
CyberT33N

Reputation: 114

Using outDir worked for me:

{
  "ts-node": {
    "esm": true, // Enable ECMAScript modules for ts-node
    // Do not forget to `npm i -D tsconfig-paths`
    "require": ["tsconfig-paths/register"], // Register tsconfig paths at runtime
    // these options are overrides used only by ts-node
    // same as the --compilerOptions flag and the TS_NODE_COMPILER_OPTIONS environment variable
    "compilerOptions": {
      "target": "ES2022", // Set ECMAScript target version to ES2022 for ts-node
      "module": "NodeNext", // Use NodeNext module resolution for compatibility with ES modules in Node.js
      "baseUrl": ".", // Set the base URL for module resolution to the root directory
      "paths": {
        "@/*": ["./"] // Map @/ to the root directory for easier imports
      }
    }
  },
  "compilerOptions": {
    "target": "ES2022", // Set ECMAScript target version to ES2022
    "module": "ESNext", // Use the latest ECMAScript module system
    "lib": [
      "dom", // Include DOM types
      "dom.iterable", // Include DOM iterable types
      "esnext", // Include ESNext library features
      "es2022" // Include ES2022 library features
    ],
    "allowJs": true, // Allow JavaScript files to be compiled
    "outDir": "./dist", // Set the output directory for compiled files
    "skipLibCheck": true, // Skip type checking of declaration files
    "allowImportingTsExtensions": true, // Allow importing TypeScript files with extensions
    "strict": true, // Enable strict type checking
    "forceConsistentCasingInFileNames": true, // Enforce consistent file name casing across the project
    "noEmit": true, // Disable emitting compiled files (useful in development)
    "esModuleInterop": true, // Enable interoperability between CommonJS and ES modules
    "moduleResolution": "node", // Use Node.js-style module resolution
    "resolveJsonModule": true, // Enable importing of JSON files
    "isolatedModules": true, // Ensure each file is treated as an isolated module
    "jsx": "preserve", // Preserve JSX syntax for further processing by another tool
    "incremental": true, // Enable incremental builds to improve build performance
    "tsBuildInfoFile": "./.tsbuildInfo",
    "baseUrl": ".", // Set the base URL for module resolution to the root directory
    "paths": {
      "@/*": ["./*"] // Map @/ to the root directory for cleaner imports
    }
  },
  "include": [
    "**/*.ts", // Include all .ts (TypeScript) files
    "**/*.tsx" // Include all .tsx (TypeScript + JSX) files
  ],
  "exclude": [
    "node_modules", // Exclude the node_modules directory from compilation
    "**/*.d.ts" // Exclude declaration files from compilation
  ]
}

Upvotes: 0

faizan atif masood
faizan atif masood

Reputation: 1

If you get Error while using canvas.js in angular

In tsconfig.app.json File

add

"allowJs":true;

Upvotes: 0

Dale Baker
Dale Baker

Reputation: 339

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.

Upvotes: 0

Fenton
Fenton

Reputation: 250812

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.

Upvotes: 1

Related Questions