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

问题

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

回答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)

回答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"
  ]

回答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 packages.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.

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

回答5:

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.

回答6:

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-76514079fb2aenter image description here

回答7:

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

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

回答8:

If you got this by upgrading Angular 8 to angular 9 then

Try that:

rollback all the changes

remove node_modules folder

npm i / yarn

npm install @angular/cli -g

ng update @angular/cli @angular/core --force

ng update --all --force

if you have angular material add @angular/material to the last command

if you want to see changes via git commits add --create-commits

From here https://stackoverflow.com/a/60143118/4153682

It solved my same issue

回答9:

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.

来源：https://stackoverflow.com/questions/57729518/how-to-get-rid-of-the-warning-ts-file-is-part-of-the-typescript-compilation-but