Typescript compiler in Angular

Question

I would like to know, if is there some option, how to exclude node_modules packages from TSC command.

I'm using Typescript v3.5.3. My tsconfig.json is

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es2018", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": [
    "build",
    "config",
    "node_modules"
  ],
  "include": [
    "src"
  ]
}

And an angular script like this

import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  styleUrls: ["./home.component.less"],
  templateUrl: "./home.component.html"
})
export class HomeComponent {
  title = "angular home";
  
  constructor(){
    this.log(123);
    this.log('hello world');
  }

  log(someArg) {
    console.log(someArg);
  }
}

Now i'm expecting error if i will run TSC, because function log is with implicit any type. In this case is everything ok! But if i will use this code

import { Node } from "@alfresco/js-api";
import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  styleUrls: ["./home.component.less"],
  templateUrl: "./home.component.html"
})
export class HomeComponent {
  title = "angular home";
  selectedNode: Node;
  
  constructor(){
    this.log(123);
    this.log('hello world');
  }

  log(someArg) {
    console.log(someArg);
  }

}

I will get errors from package from node_modules like

node_modules/@alfresco/js-api/src/authentication/processAuth.ts:181:9 - error TS2322: Type 'null' is not assignable to type 'string | undefined'.

181 this.authentications.basicAuth.username = null; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I know why, beacuse "noImplicitAny" is set to true, but what i want is, to ignore node_modules packages! Therefore in Angular exclude option from tsconfig mean nothing. I think, that with build is package @alfresco/js-api included to script and checked as one.

Interesting thing is, if i will use similar code in React.js, everything is as i excpect. Is there some option or something, when i use command "TSC" with "noImplicitAny" = true and node_modules packages will be ignored? Thanks a lot!

Hmm I had a similar problem yesterday. So adding node_modules/@alfresco to exclude array in compilerOptions won't work? — Andrei Gătej
No, doesn't work, even if i add exactly name of the script "processAuth.ts" doesn't work either. — user1173536

Vipul Dessai Vipul Dessai · Accepted Answer · 2019-12-14T12:56:11

The files which are referenced using import will have to be compiled by tsc command. Exclusion is for convenience while running tsc command to exclude the files which are not imported (or used) in the files which are to be compiled.

By default, tsc command ignores node_modules, thats why no errors when @alfresco/js-api is not imported and when it is included TSC will resolve them and imply the compilerOptions on these files as well.

Refer tsconfig.json document

Any files that are referenced by files included via the "files" or "include" properties are also included. Similarly, if a file B.ts is referenced by another file A.ts, then B.ts cannot be excluded unless the referencing file A.ts is also specified in the "exclude" list.

So it all depends on the error and the modules that are imported and not on the typescript compiler.

Please read this issue thread for more details, https://github.com/microsoft/TypeScript/issues/7432

So for resolving this issue either use other modules or turn off the compiler options for Implicits.

Typescript compiler in Angular

1 Answers