[angular] Is there a way to remove unused imports and declarations from Angular 2+?

I'm assigned to take some messed code from other developers who have already left the company recently.

I am curiously asking is there some plug-in of Visual Studio Code or other means that could help us to tidy and organize the imports and references quickly and effectively?

For example, there are maybe hundreds of imports like this

import { AutoCompleteModule,InputSwitchModule } from 'primeng/primeng';
import { ListboxModule } from 'primeng/primeng';

could be converted to similarily

import { AutoCompleteModule,
         InputSwitchModule,
         ListboxModule  } from 'primeng/primeng';

Or other functions like automatically removing those unused imports and declarations from the app.module or from all components through the whole project?

Thanks for any feedback!

This question is related to angular visual-studio-code

The answer is


As of Visual Studio Code Release 1.22 this comes free without the need of an extension.

Shift+Alt+O will take care of you.


If you're a heavy visual studio user, you can simply open your preference settings and add the following to your settings.json:

...
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.organizeImports": true
}
....

Hopefully this can be helpful!


To be able to detect unused imports, code or variables, make sure you have this options in tsconfig.json file

"compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true
}

have the typescript compiler installed, ifnot install it with:

npm install -g typescript

and the tslint extension installed in Vcode, this worked for me, but after enabling I notice an increase amount of CPU usage, specially on big projects.

I would also recomend using typescript hero extension for organizing your imports.


There are already so many good answers on this thread! I am going to post this to help anybody trying to do this automatically! To automatically remove unused imports for the whole project this article was really helpful to me.

In the article the author explains it like this:

Make a stand alone tslint file that has the following in it:

{
  "extends": ["tslint-etc"],
  "rules": {
    "no-unused-declaration": true
  }
}

Then run the following command to fix the imports:

 tslint --config tslint-imports.json --fix --project .

Consider fixing any other errors it throws. (I did)

Then check the project works by building it:

ng build

or

ng build name_of_project --configuration=production 

End: If it builds correctly, you have successfully removed imports automatically!

NOTE: This only removes unnecessary imports. It does not provide the other features that VS Code does when using one of the commands previously mentioned.


Since VSCode v.1.24 and TypeScript v.2.9:

For Mac: option+Shift+O

For Win: Alt+Shift+O


Examples related to angular

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class error TS1086: An accessor cannot be declared in an ambient context in Angular 9 TS1086: An accessor cannot be declared in ambient context @angular/material/index.d.ts' is not a module Why powershell does not run Angular commands? error: This is probably not a problem with npm. There is likely additional logging output above Angular @ViewChild() error: Expected 2 arguments, but got 1 Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' Access blocked by CORS policy: Response to preflight request doesn't pass access control check origin 'http://localhost:4200' has been blocked by CORS policy in Angular7

Examples related to visual-studio-code

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app Visual Studio Code PHP Intelephense Keep Showing Not Necessary Error Cannot edit in read-only editor VS Code How to setup virtual environment for Python in VS Code? Pylint "unresolved import" error in Visual Studio Code Why do I keep getting Delete 'cr' [prettier/prettier]? How to set up devices for VS Code for a Flutter emulator VSCode single to double quote automatic replace js 'types' can only be used in a .ts file - Visual Studio Code using @ts-check How can I clear the terminal in Visual Studio Code?