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"
    ]
  }
}

Answer 1

事实证明，您需要从tsconfig.app.json "include" "src/**/*.ts"删除这一行，并且只保留文件中的入口点（main.ts 和 polyfills.ts）

Answer 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"
  ]

Answer 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.

Answer 4

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"
  ]
}

Answer 5

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

Answer 6

This may seem obvious, BUT you will see this warning for any file that you add but is not yet referenced/imported into another file. This will become obvious when you attempt to edit one of the files subject to the warning, and Ivy does not automatically recompile after editing the file. Once you import the module into a dependent file and start using it, the warnings go away.

The answers above may be relevant to some, but what I just described in this post was the root cause of my warnings. Note, I do not have an include or files array in my tsconfig.json or tsconfig.app.json and the warnings went away as soon as I actually referenced the files elsewhere in my project.

Answer 7

02-08-2020

Ionic 5+ Angular 9+ App.

Note: see the include section.

tsconfig.app.json

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

Answer 8

Just add the zone-flags.ts as well and remove any includes.

 "files": [
    "src/main.ts",
    "src/polyfills.ts",
    "src/zone-flags.ts"
  ]

Answer 9

after try out the before solutions proposals , it worked for me

update in your package.json

"@angular-devkit/build-angular": "~0.1000.3" 

can you see here all versions.

https://www.npmjs.com/package/@angular-devkit/build-angular?activeTab=versions

check which version work with you current version from angular/core

for angular 10 work with version 0.1000.3 of @angular-devkit/build-angular

Answer 10

I began to see the warnings in Angular 10 which is a little surprising based on the fact it was a new app created using the CLI out of the box and I got the messages when doing a prod build for test.ts and enviornments.prod.ts . I'd think these files would be excluded by default, but they are not and that's odd.

The deal is these files are not needed for TypeScript transpolation; they don't need .js versions of the files to be bundled and sent to the browser. The test.ts and environments.prod.ts files are a means to an end for build time requirements in Angular. Therefore they can be added to the exclude section in tsconfig.app.json or applicable TypeScript configuration file in your app like below:

  "exclude": [
    "src/**/*.spec.ts",
    "src/test.ts",
    "src/environments/environment.prod.ts"
  ]

Once these are added as above, the warning will not show anymore.

Answer 11

tsconfig.app.json

 "exclude": [
    "src/**/*.spec.ts",
    "src/test.ts",
    "src/environments/environment.prod.ts"
  ]

This snippet solves the issue.

Answer 12

Try to delete the folder node_modules/.cli-ngcc which includes the Angular CLI cache files.

Answer 13

After upgrading to Angular 10 I got the same warnings. Running npm i reported version mismatches for some dev dependencies. After upgrading these ( npm i <package>@latest ), and updating nodejs to version 12 (was version 10), the warnings were gone.

In my case, these were the packages that had to be updated:

• @angular-devkit/build-angular
• codelyzer

Answer 14

Please try this in your tsconfig.json file:

{
  "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"
    ],
    "include": [
      "src/**/*" //or "../src/**/*.ts"
  ],
  "exclude": [
    //files to exclude: example below
      "node_modules",
      "**/*.spec.ts"
  ]
  }
}

For more information, please refer: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Answer 15

I tried many things to solve this problem, and in the end I was able to solve it.

my problem was updating an app that was found in angular 8.1 to angular 9.x, but the app also used Ionic

you should only have aot: true inside angular.json

in src / polyfills.ts to import './zone-flags.ts'; remove .ts

https://medium.com/@grantbrits/upgrade-ionic-4-to-ionic-5-angular-76514079fb2a enter image description here

Answer 16

Check your main tsconfig.app.json file.

and see whether you have following content inside,

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Most likely, the lines to blame were this.

Add only entry points to the files or include properties in your tsconfig.

So, remove these lines should you have on your tsconfig.app.json . That's what the error is about :)

"exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]

I hope this will help someone.

Thanks.

Answer 17

将 angular 9 应用程序更新为 angular 10 后，我遇到了同样的问题。更新 angular-devkit 解决了它。

Answer 18

In my case, the classes reported by the warning were really used. However, the problem was that when importing them, they had the extension ".js".

So, this line was causing the error "WARNING in src\\app\\user.service.ts is part of the TypeScript compilation but it's unused":

import { UserService } from './user.service.js';

And I could fixed it by removing ".js" extension:

import { UserService } from './user.service';

Answer 19

My team has been banging our head against this same symptom for months, and I finally figured out that our tsconfig.worker.json was too inclusive. In our case hundreds of "part of the TypeScript compilation but it's unused" messages were showing-- it seemed like every ts file in the app was listed, some multiple times.

The way it was:

"include": [
  "src/**/*.worker.ts"
]

What stopped the defective behavior:

"files": [ ]   # no include or exclude block

I think what was happening is that our standard tsconfig.app.json's files object was sufficient. From just those entry points (main.ts & polyfills.ts), the TS compiler was able to find references to all our *.worker.ts files and transpile them. Somehow the tsconfig.webworker.ts configuration was telling the compiler to look twice at all *.webworker.ts files. I'm not quite sure why that explodes into so many warnings; perhaps our webworker files (we have about 20) are unnecessarily importing a bunch of things they don't use.

Anyway, with this tweak, I got rid of the numerous warnings, and our compilation time cut in half. Phew!

Answer 20

就我而言，排除未使用的文件更容易：

"exclude": ["test.ts", "**/*.spec.ts","environments/environment.*.ts"]

Answer 21

In my scenario, my tsconfig.json was missing the exclude with spec files in it. This is the snippet of my tsconfig file which fixed the issue.

"exclude": [
"**/*.spec.ts",
"./node_modules/*"
],
 "files": [
"src/main.ts",
"src/polyfills.ts"
]

Answer 22

Basically, the problem is that on run time the compiler checks whether those files are imported or used somewhere and if they are not it throws warnings... So if the warnings are connected with environment.ts files you can exclude the environment files in tsconfig.app.json as shown above in the comments but if there are warnings about some components which are not imported anywhere, you must check those components and see why they are not used, and if you do not need them just remove them.

Answer 23

Late to the party.

I got this error

src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig

To fix it I need to add these 2 lines to my tsconfig.app.json

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

Answer 24

For me, the problem was that I was using:

loadChildren: () => import('./components/admin/_admin.module').then(m => m.AdminModule)

in my routes.ts file but wasn't importing module. So if I just put

import { AdminModule } from './components/admin/_admin.module';

it solves it.