How to get rid of the warning .ts file is part of the TypeScript compilation but it's unused

Question

I Just updated angular to latest 9.0.0-next.4. I am not using routing but suddenly after updating I keep seeing this warning. How Do I remove this warning

WARNING in src/war/angular/src/app/app-routing.module.ts is part of the TypeScript compilation but it's unused. Add only entry points to the 'files' or 'include' properties in your tsconfig.

package.json

  "dependencies": {
"@angular/animations": "^9.0.0-next.4",
"@angular/cdk": "^8.1.4",
"@angular/common": "^9.0.0-next.4",
"@angular/compiler": "^9.0.0-next.4",
"@angular/core": "^9.0.0-next.4",
"@angular/forms": "^9.0.0-next.4",
"@angular/material": "^8.1.4",
"@angular/platform-browser": "^9.0.0-next.4",
"@angular/platform-browser-dynamic": "^9.0.0-next.4",
"@angular/router": "^9.0.0-next.4",
"@ng-bootstrap/ng-bootstrap": "^5.1.0",
"bootstrap": "^4.3.1",
"hammerjs": "^2.0.8",
"moment": "^2.24.0",
"ng-image-slider": "^2.0.1",
"panzoom": "^8.1.2",
"rxjs": "~6.5.2",
"tslib": "^1.9.0",
"zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.2",
    "@angular/cli": "^8.3.2",
    "@angular/compiler-cli": "^9.0.0-next.4",
    "@angular/language-service": "^9.0.0-next.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "^5.15.0",
    "typescript": "^3.5.3"
  }

tsconfig.json

    {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Solution 1

It turned out that you need to remove this line from "include" "src/**/*.ts" from tsconfig.app.json and only keep entry points in files (main.ts and polyfills.ts)

Solution 2

I could get it working by defining the files property in tsconfig.app.json. These files are relative to the tsconfig.app.json file.

"files": [
    "main.ts",
    "polyfills.ts"
  ]

Solution 3

I had seen these messages complaining about environment.*.ts files which are actually mentioned in angular.json for different builds, after upgrading from Angular 8 to Angular 9 including CLI local and global. However, I did not run ng update which might update tsconfig.json with the following, instead I updated tsconfig.json manually.

    "files": [
        "src/main.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.d.ts"
    ]

Then the warnings disappear.

Update 2020-05-27 with Angular 9.1.x in Visual Studio Professional 2019

The little block above is not needed anymore. Otherwise, it will cause the spec test codes complaining "module not found" against modules which are actually there since ng test is building and running just fine, and the build and the running of the ng app are OK. Apparently somethings in NG had changed between 9 and 9.1.

Here's my working tsconfig.json now:

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "es2020",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es2015",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2018",
            "dom"
        ],
        "skipLibCheck": true
    }
}

remarks:

I target Google Chrome and Safari only, so if you want to target other browsers, you may need to adjust accordingly.

Solution 4

Are you using @angular-builders/custom-webpack?

I was getting bombarded with these messages in Angular 10 having never seen them before. Changing includes made no difference.

Then I found https://github.com/angular/angular/pull/36211.

This is essentially the same error as raised in this question but for ngtypecheck.ts files (whatever they are exactly i'm not sure!)

WARNING in /home/circleci/ng/aio/src/main.ngtypecheck.ts is part of the TypeScript compilation but it's unused. Add only entry points to the 'files' or 'include' properties in your tsconfig.

It looks like for me it's actually to do with @angular-builders/custom-webpack.

https://github.com/just-jeb/angular-builders/issues/781 where an issue was only just opened. Thanks to https://stackoverflow.com/a/62573294/16940 for pointing this out.

Updating to the v10.0.1 fixed it for me, but see the above issue for the latest.

"@angular-builders/custom-webpack": "10.0.1"    // as of today

Solution 5

Updated to Angular 9 today and got warnings. My solution was add this "files" array without the "src" in the path. Just added:

 "files": [
    "main.ts",
    "polyfills.ts"
  ],

My full tsconfig.app.json file is:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": ["node"]
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

View more solutions

Comments

[dota2pro]

It seems adding those files in exclude part of tsconfig.app.json solves the issue

[Paul Strupeikis]

I didn't even have "include" "src/**/*.ts" in my tsconfig.app.json and I still get the warning messages.

[Ayyash]

you have it in tsconfig.json may be? It gets inherited

[jkyoutsey]

I do not have an include anywhere in my tsconfig's. I do have some excludes already. But I get 29 of these warnings. If I add in the include for main and polyfills I still get 3. I can't seem to exclude those three with any combination of paths.

[DauleDK]

I fixed this by updating angular-cli with npm i @angular/cli@latest

[Muhammad bin Yusrat]

This is a lazy loaded module, and there doesn't seem to be a reason why you would want to import it, to kill the lazyloadedness.

[ChumiestBucket]

This results in Cannot find name 'describe'. Do you need to install type definitions for a test runner?, which can be cured by reversing the changes made in this answer.

[Peter Wretmo]

I changed the value for include in my tsconfig.app.json from: ["./**/*.ts"] to ["./**/*.d.ts"] That removed the warning for me.

[Matthew Pitts]

In my case I did not have a specific files array entry in my tsconfig.app.json, and I would receive the error message for just about every new .ts file I added to the project. Explicitly adding the 'files' array with the 2 entry files above, cleared the warnings.

[Elkin Gutierrex]

medium.com/@grantbrits/…

[72GM]

this actually answers the question and should be the marked answer - as the poster says "I am not using routing" and it is complaining that the routing file is unused... so either use it or delete it and the warning will go away

[feder]

Just add ./zone-flags.ts to the files section in your tsconfig.app.json. Do NOT modify the polyfills.ts

[Sunil Garg]

nothing workds angular-cli is on latest version, no includes on tsconfig. any solution so far?

[aruno]

any idea why I didn't get this for Angular 9 and got swamped with Angular 10 with all these messages?

[ramon22]

Same here using @angular-builders/custom-webpack": "^9.2.0 tried every solution out there nothing seems to stop WARNING's

[aruno]

@ramon22 switching to 10.0.0-beta0 worked for me. Any remaining errors were to do with CommonJS packages.

[Sielu]

You may also need to install or link webpack if you receive Cannot find module webpack

[JWP]

Worked for me in Angular 10.0.1.

[Morgan Touverey Quilling]

(About Sielu's comment) My technique is to install webpack (so it's specified explicitly in devDependencies), and add the same entry to resolutions to avoid potentially having multiple version of webpack installed (@angular-devkit#build-angular has webpack in its peer deps), since that could also cause various problems. To check if you have multiple versions of webpack installed, type yarn why webpack (and if you're working with npm, do yourself a favor and stop ;)).

[Craig Myles]

Make sure and check the base tsconfig.json file too, if tsconfig.app.json extends it, or another file.

[devosu]

get file " .../main.ts", not found error with angular 10

[fabio984]

my main.ts file path its: "src\main.ts", check if yours is the same. Anyway: I'm with Angular 9 yet.

[Dominik]

I have to set the include for autocompletion in vscode. Is there a way to keep this and suppress the warnings?

[Dominik]

For me not. I removed the .ts entry (only kept .d.ts). Fewer warnings now. But not entirely removed. I checked any tsconfig.

[trungk18]

As of now, you can do "@angular-builders/custom-webpack": "^10.0.1"

[trungk18]

If you got Cannot find module webpack, delete your package-lock.json and run npm i again. It should fix the problem. I am upgrading my pet project to Angular 10 github.com/trungk18/jira-clone-angular

[kuldeep]

the solution worked for me, however better to do this: based on the link you provided: npm i @angular-devkit/build-angular

[Siobhan Holubicka]

I tried all the other answers first but in the end this answer worked for me and it was the most simplist one. I actually had a few modules and I just had to add it to one of them for the error to disappear.

[MTMDev]

just this worked for me: ng update @angular-devkit/build-angular

[Matthew Marichiba]

I would add a general comment about tsconfig files. Be conservative about what you put in the files and includes objects. There's a mental tendency to think "Oh, I need to reference all my files here!" but this is not true. As an experiment, strip out everything in include and files blocks, and add back only what you need to make the build succeed.

[Evan]

can you add more explination? I have coppied this & still got an error

[Sampath]

@Evan This is for Angular 9. What is your version here?