wgrabowski / ngx-unused Goto Github PK

Find declared but unused Angular classes in your codebase.

Home Page: https://www.npmjs.com/package/ngx-unused

JavaScript 0.79% TypeScript 97.41% Shell 1.80%

angular unused unused-code typescript angular-unused-components angular-unused-pipes angular-unused-directives angular-unused-code

ngx-unused's People

Contributors

Stargazers

Watchers

Forkers

wangzihao5325 arielbar

ngx-unused's Issues

Compatibility with Angular 13

Check if it works with Angular 13, release patch if necessary

Not detecting component usage in inline style template property

It appears that ngx-unused doesn't recognize component usage when it's in an inline style template property, as shown in the example below.

@Component({
  selector: 'app-list',
  template: `<span>here</span>`,
})
export class AppListComponent { }

@Component({
  selector: 'app-shell',
  template: `<app-list></app-list>`,
})
export class AppShellComponent { }

Effects classes for NGRX/store marked as unused

We have ngrx store in our project and effects are registering via StoreModule.forRoot([Effect]) or StoreModule.forFeature([Effect]). And it is considered as "unused"
would be cool to fix this :)

Missing glob

Hey @wgrabowski thanks for sharing this library. I just found your repo and I was able to find and remove a lot of unused classes in an old project thanks to it. Great job!

I'm facing this error that I was able to manage by myself installing glob globally:

> ngx-unused libs apps/owner-panel -p tsconfig.base.json    
node:internal/modules/esm/resolve:844
  throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base), null);
        ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'glob' imported from /Users/ricardo/.nvm/versions/node/v20.10.0/lib/node_modules/ngx-unused/dist/createProject.js
    at packageResolve (node:internal/modules/esm/resolve:844:9)
    at moduleResolve (node:internal/modules/esm/resolve:901:20)
    at defaultResolve (node:internal/modules/esm/resolve:1121:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v20.10.0

Support for loadComponent and loadChildren

I don't know if it's the new way to export the routes in Angular 16 but the following codes

import { provideRouter, Routes } from '@angular/router';
import { EnvironmentProviders } from '@angular/core';

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('../app/admin/admin.routes'),
  },
{
    path: 'sample1',
    loadComponent: () => import('./component/sample1.component')
       .then((s) => s.Sample1Component),
}
];

export const routerProvider = (): EnvironmentProviders => provideRouter(routes);

import { Routes } from '@angular/router';

export default [
{
    path: 'sample2',
    loadComponent: () => import('./component/sample2.component')
       .then((s) => s.Sample2Component),
}
] satisfies Routes;

reports Sample1Component and Sample2Component as unused when analysed.

Unused imported modules

Add new command for checking if for given module class anything from what this module import is used in this module files.

for given module class get all imported modules (that are not from node_modules, since source code is analyzed)
for each imported module get its exports and providers
for each exported and provided class from imported modules look for usages in analyzed module declarations and providers

Non zero exit code if detecting unused component/directive/pipe/service

Problem

Using a tool like this in CI environment requires to identify if there is unused code or not.
Typically this is done with different exit codes.

Suggestion

Introduce distinct exit codes to convey specific information:

    0: No unused code detected.
    1: Detected unused component, directive, pipe, or service.
    2: No tsconfig path provided

add exit codes documentation to README.md.

I can gladly create a PR if that is desired and helps

Improve cli

Improve cli - add common flags like help and usage

The script marks components as unused if they use ‘fancy’ selectors

Consider this component:

@Component({
  selector: 'table[sortees], .table[sortees]',
  templateUrl: './sortable-table.component.html',
  styles: [
  ]
})
export class SortableTableComponent

ngx-unused doesn’t recognize that the component is in use even though it is. I suppose this is due to the ‘strange’ selector.

Another test case:

@Component({
  selector: 'li[commissionConfiguration]',
  templateUrl: './commission-configuration.control.html',
  styleUrls: ['./commission-configuration.control.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CommissionConfigurationControl

If this is a known (and not to be fixed) limitation, I suggest documenting it in the readme.

Environment:

$ uname -a
Linux mwaibel-go-LAPTOP 5.4.72-microsoft-standard-WSL2 #1 SMP Wed Oct 28 23:40:43 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 20.04.6 LTS
Release:        20.04
Codename:       focal

$ npx ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    
DEPRECATED: The 'defaultProject' workspace option has been deprecated. The project to use will be determined from the current working directory.

Angular CLI: 14.2.2
Node: 16.13.0
Package Manager: npm 8.15.1 
OS: linux x64

Angular: 14.2.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.2
@angular-devkit/build-angular   14.2.2
@angular-devkit/core            14.2.2
@angular-devkit/schematics      14.2.2
@angular/cli                    14.2.2
@schematics/angular             14.2.2
ng-packagr                      14.1.0
rxjs                            7.5.6
typescript                      4.7.4

Write better code

Due to some interest of this tool I've took a look in my code and I think it can be written in better way.

Rewrite code to be faster and more focused:

remove ts-morph dependency, rely only on Typescript APIs
don't count all usages of given class, check if it has any relevant usage (if even one usage is found then return true, process less files, should be faster)
tool should do what it's name says, nothing more - found Angular classes that have no relevant usages in other files, therefore it should return only list of class names with their source files
when looking usages by selector only look in relevant files (currently is filtering all files)

Improve cli:

use some library for cli interface (probably cac)
add flag for spec file pattern (default *.spec.ts)
add --ci flag to skip progress in output (or flags for human readable and machine readable output)
consider adding flags for --components, --pipes, --directives, --injectables

Fix errors reported by community

Cannot be used in a pipe

When piping the output to another process, as in

$ npx ngx-unused src/tsconfig.json | tee ng-unused.txt

node crashes with the following error:

/home/mwaibel-go/.npm/_npx/6f3ac8a83e849633/node_modules/ngx-unused/src/common/cli-utils.js:37
    process.stdout.clearLine(-1);
                   ^

TypeError: process.stdout.clearLine is not a function
    at Object.printProgress (/home/mwaibel-go/.npm/_npx/6f3ac8a83e849633/node_modules/ngx-unused/src/common/cli-utils.js:37:20)
    at /home/mwaibel-go/.npm/_npx/6f3ac8a83e849633/node_modules/ngx-unused/src/component/usage.js:9:21
    at Array.reduce (<anonymous>)
    at Object.countComponentUsages (/home/mwaibel-go/.npm/_npx/6f3ac8a83e849633/node_modules/ngx-unused/src/component/usage.js:7:18)
    at Object.countUsages (/home/mwaibel-go/.npm/_npx/6f3ac8a83e849633/node_modules/ngx-unused/src/index.js:16:36)
    at Object.<anonymous> (/home/mwaibel-go/.npm/_npx/6f3ac8a83e849633/node_modules/ngx-unused/cli.js:11:20)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)

I assume the clearLine function is not present when stdout is not a TTY. I suggest not outputting the status information in that case.

Environment:

$ uname -a
Linux mwaibel-go-LAPTOP 5.4.72-microsoft-standard-WSL2 #1 SMP Wed Oct 28 23:40:43 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 20.04.6 LTS
Release:        20.04
Codename:       focal
$ node -v
v16.13.0
$ npm -v
8.15.1

didn;t found files in window

When run command on window pc get error what ts files not found.

npx ngx-unused src -p src/tsconfig.app.json

Main problem than in globSync
https://github.com/wgrabowski/ngx-unused/blob/master/lib/createProject.ts#L34

includePatterns =C:\\project\\src but globSync can't work with in. it expected C:/project/src.

Angular CLI: 17.1.0
Node: 20.9.0
Package Manager: npm 10.4.0
OS: win32 x64