Add support for Angular about knip HOT 20 CLOSED

@webpro
Knip would need to understand Angular component templates. Angular components are class-based. Component class methods are used almost exclusively by Angular's custom string-based component templates so most Angular component event handlers are marked as unused by Knip.

from knip.

Thanks @ice-blaze! I'll look into that, looks very helpful.

If others have more ideas/concerns, feel free to join in.

from knip.

@webpro you are faster than Lucky Luke!

• The main.ts change is cool and works as expected 👍
• I can't share my main project sadly but will keep you in touch if there are other issues that I'll reproduce in the example project.
• Karma/Jasmine are the default unit test dependencies but angular has started to support Jest, and I have the feeling that the community is shifting to Jest. So maybe it's not so needed to put a lot of effort if ignoring them is enough.
• About the TypeScript definition for angular.json I'm sorry but I don't it's a bit out of my league. I'll try to check more in the future.

from knip.

Nah you don't want to add @public everywhere, maybe --exclude classMembers is alright.

Better ideas most welcome :)

from knip.

Not sure what exactly support for Angular projects means? If you have an example I can have a look.

The --performance flag shows the time spent internally in Knip functions, so indeed isn't about the performance of your code :)

from knip.

Closing this due to inactivity.

from knip.

Same here. I come from ts-prune https://github.com/nadeesha/ts-prune and maybe I'm missing something in my config file but I got a lot of issues of unused.

My config file looks like:

{
  "entry": ["./src/app/app.module.ts"]
}

Knip will complain for a public attribute like this example

@Component({
  selector: "app-example-component",
  template: "{{publicVariable}}",
})
export class ExampleComponent {
  public publicVariable = "public variable";
}

from knip.

Maybe someone can point me to an example rep(r)o? I would need to see examples, etc. Please help me help you :)

from knip.

@webpro I created this project https://github.com/ice-blaze/knip-angular-example (clean angular with one new component test-component.component.ts) just run npm i and then npm run knip. My biggest concern is just the last line Unused exported class members(Got a lof them in my main project) For the rest I don't really know if they are false positive. (maybe @angular/compiler but could be just ignored I guess in the config)

% npm run knip            

> [email protected] knip
> knip --config ./knip.json

Unused files (1)
src/main.ts
Unused dependencies (3)
@angular/compiler                  package.json
@angular/forms                     package.json
@angular/platform-browser-dynamic  package.json
Unused devDependencies (9)
@angular-devkit/build-angular  package.json
@angular/compiler-cli          package.json
@types/jasmine                 package.json
jasmine-core                   package.json
karma                          package.json
karma-chrome-launcher          package.json
karma-coverage                 package.json
karma-jasmine                  package.json
karma-jasmine-html-reporter    package.json
Unused exported class members (1)
publicVariable  TestComponentComponent  src/app/test-component/test-component.component.ts

from knip.

Heya guys!

Sorry for hijacking the thread, but i'm very interested on this topic as well.
What I've found out in the past few days:

• in @ice-blaze's repo the entry should be changed to src/main.ts (this is one of the default values in knip config)
  • with this approach all the files will be checked (main.ts is the main entrypoint for an angular app)
• some angular dependencies will be listed as unused dependencies/dev dependencies
  • i've cleaned up my project, so not all are listed here, but please take a look

"ignoreDependencies": [
    "@angular-devkit/build-angular",
    "@angular/compiler-cli",
    "jest-preset-angular",
    "ts-node"
]

ts-node is used internally, so it should be there. I bet there are some other fake warnings in the given example, but please note

• angular/forms can be used directly in module files (or in standalone components)
• angular/compiler-cli cannot be used directly, it must be ignored manually
• angular-devkit/build-angular cannot be used directly, it must be ignored manually
• angular/platform-browser-dynamic is used in the main.ts file

Regarding the static code analysis in angular, AFAIK ng lint is the best way to do that. Unfortunately angular uses declarative templating, so knip should understand that. This solution has two steps (based on my understanding):

• make knip able to load html files (templateUrl: './app.component.html') or parse html strings (template: '<h1>Hello!</h1>')
• then knip should be able to parse them (under the hood angular parses the declarative templates into imperative ones - ref)

from knip.

Please create reproducible cases so I can find the false positives. Then I have something to work with. Perhaps best to modify/extend that repo?

from knip.

Take a look at this repo: https://github.com/kfarkasHU/angular-knip-repro
I've added all the errors to the knip config file, so you can check everything in once place.

The issue i was facing with:

• there are dependencies such as forms and router that are there, but not used always
  • when using ng new we have the option to not install router, but once it is installed, it should be used or knip reports it
  • forms is always there, but not always used (to be heuristic without using this lib, it makes no sense to use angular)

Thanks for your work!

from knip.

I update my repo https://github.com/ice-blaze/knip-angular-example

• @kfarkasHU maint.ts is indeed a better fit 👍
• @webpro I tried to add all the unit test dependencies into ignoreDependencies but it doesn't seem to work with devDependencies (works as expected with dependencies). Maybe it's out of the scope of this issue.
• @kfarkasHU currently ng lint use eslint and therefore it's not able to check other files. (Maybe in the future eslint will be able to do that but then knip will be at risk)

@webpro Thank you for your time and work 👍

from knip.

Thanks, I've released a first version you can install like npm install -D knip@angular. Doing 0.0.0 based snapshot releases so please bear with me.

• The angular.json is traversed to find some dependencies.
• This includes the main script so you don't need to add it as an entry (and in case of src/main.ts, this was already a default entry of Knip).
• This includes @angular-devkit/build-angular dependency, resolved from e.g. the @angular-devkit/build-angular:karma builder.

TODO

• Apparently the karma in @angular-devkit/build-angular:karma means a bunch of extra dependencies that I'm not yet sure of how to infer. So there's still false positives here.
• Decide what to do with public members eg:

export class TestComponentComponent {
  public publicVariable = 'public variable';
  public form = new FormControl(true);
}

I'll look into what can be inferred from e.g. @Component by Knip. But for now you can/should mark the as public using the @public tag, like so:

export class TestComponentComponent {
  /** @public */
  public publicVariable = 'public variable';
  /** @public */
  public form = new FormControl(true);
}

This may look redundant, but public class member syntax is "class level" (internal), while the @public tag read by Knip is more "file/project level" (external).

Questions

• Is the TypeScript definition for angular.json available somewhere? The thing provided with @angular/cli (workspace-schema.d.ts) is incomplete. For now I shipped a manual conversion from @angular/cli/lib/config/schema.json.

To be continued :)

from knip.

Feel free to share large projects (yours or not) so we can find false positives and fix 'em! Feel like helping out? Pull requests are most welcome :)

from knip.

Thanks for this tool.

I'm using the knip@angular in my project, and found that knip is reporting my public vars in my exported component (needed in the html template for my component) as Unused exported class members

@Component({
  selector: 'mycomponent,
  templateUrl: './mycomponent.html',
  styleUrls: ['./mycomponent.scss']
})
export class MyComponent {
   publicVarNeededInHTML: string = 'test'
}

from knip.

@fjrial I'm thinking in Angular projects you should use --exclude classMembers, as Knip doesn't know what public members are actually used in those HTML templates. Maybe Knip can find some heuristics to improve on this, but not sure yet.

from knip.

🚀 This issue has been resolved in v2.26.0. See Release 2.26.0 for release notes.

from knip.

I just pulled the trigger and published the initial version. Let's see how this pans out :)

from knip.

Thank you very much 👍 I'm just not such a fan of the @public but I get it, it's the expected behavior. Thanks again for the job you have done :)

from knip.