CODEWITHSUNDEEP
javascriptangulartypescript
miken.mkndev
miken.mkndev

Reputation: 1951

Angular 6 error TS8011 type arguments can only be used in a .ts file

I have an Angular 6 app that I need to include a JS library. The library is proprietary so I cannot get into the specifics of what it is, but the issue I'm having is the TypeScript compiler seems to get confused with characters such as this <<24>> thinking it is a type casting when it's really not. Because of this issue I get the following error when I compile.

error TS8011: 'type arguments' can only be used in a .ts file

The file I'm including, that it's baking at, is a traditional JS file. I cannot modify this file as it's a minified library, and it's not available via NPM.

My initial thought was to just have the TS compiler to ignore/exclude the file, but that doesn't work for some reason. Here is a tsconfig.json config I've tried that didn't work.

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

I have tried with "allowJs" enabled and disabled, but I get the same error.

Do you all have any idea how I can get the TS compiler to effectively ignore this file so I can just import it with a script tag?

Thanks!

Upvotes: 1

Views: 279

Answers (1)

mwilson
mwilson

Reputation: 12900

The way you need to reference those types of files (standard .js files) is one of two ways:

  1. Add the script reference in the script array in the angular.json file
  2. Add the script reference directly in the index.html file

I would go with the first option as the documentation specifically states this:

https://angular.io/guide/workspace-config#additional-build-and-test-options

An object containing JavaScript script files to add to the global context of the project. The scripts are loaded exactly as if you had added them in a tag inside index.html. See more in Styles and scripts configuration below.

I think the issue you're having is that you're trying to use import statements or reference the script file in a way that the tsc (TypeScript Compiler) is trying to transpile it.

Upvotes: 1

Related Questions