# ng-changedetector > Command-line tool to help you identify the components slowing down your Angular application Latest version **1.0.11** (published 2021-06-02) · MIT license · 0 weekly downloads ## Install ```sh npm install ng-changedetector pnpm add ng-changedetector yarn add ng-changedetector bun add ng-changedetector ``` Provides the command `changedetector`. ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.11 | | Published | 2021-06-02 | | First published | 2021-05-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 47.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Aboma Kelly | | Maintainers | abomadev | | Keywords | changedetector, ng-changedetector, performance, angular performance, change detection, onPush, on push, angular, ng, angular tools, ng tools, performance tools | ## Links - npm: https://www.npmjs.com/package/ng-changedetector - Repository: https://github.com/abomadev/changedetector - Homepage: https://github.com/abomadev/changedetector#readme - Issues: https://github.com/abomadev/changedetector/issues - npm.io page: https://npm.io/package/ng-changedetector ## Dependencies (5) - [glob](https://npm.io/package/glob.md) ^7.1.7 - [yargs](https://npm.io/package/yargs.md) ^13.2.4 - [line-reader](https://npm.io/package/line-reader.md) ^0.4.0 - [n-readlines](https://npm.io/package/n-readlines.md) ^1.0.1 - [replace-in-file](https://npm.io/package/replace-in-file.md) ^6.2.0 ## Alternatives - [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads - [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads - [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads - [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads - [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads ## Recent versions - 1.0.11 (latest) — 2021-06-02 - 1.0.10 — 2021-06-01 - 1.0.9 — 2021-06-01 - 1.0.8 — 2021-06-01 - 1.0.7 — 2021-05-31 - 1.0.6 — 2021-05-31 - 1.0.5 — 2021-05-30 - 1.0.4 — 2021-05-30 - 1.0.3 — 2021-05-30 - 1.0.2 — 2021-05-30 - 1.0.1 — 2021-05-30 - 1.0.0 — 2021-05-30 ## README # Change Detector Change Detector is a command-line tool designed to help you identify the components slowing down your Angular application. ## Install Install globally (recommended): ``` npm install -g ng-changedetector ``` Or as a dev dependency: ``` npm install ng-changedetector --save-dev ``` ## How does it work? Specify which Angular modules/components you want to run `changedetector` on and it will inject a few lines of code into the component's HTML and Typescript files (don't worry, you can [easily remove](#clean-up) the changes any time). The injected code will enable the component to increment a counter and log to your brower console everytime the component is re-rendered. This will allow you to identify components which are being rendered more often than expected and potentially causing performance issues within your application. Next, apply performance optimizations to those troublesome components. Unfortunately, that part is up to you. But a good place to start is by implementing the OnPush change detection strategy on that component. Once you're done, you can simply [remove the code](#clean-up) injected by `changedetector`. >If you need more optimization techniques, [@mgechev](https://twitter.com/mgechev) compiled an awesome checklist on Angular Performance which you can find [here](https://github.com/mgechev/angular-performance-checklist). ## Usage You can get a full description of Change Detector's usage by running: ``` changedetector --help ``` > **NOTE:** > Change Detector is designed to clean up the few lines of code it inserts in order to leave your code the way it found it but while not necessary -- it is recommended that the projects you use this on are version controlled for peace of mind. ### Quick Start ``` changedetector -p /path/to/project -c -m ``` In this example, lets apply `changedetector` on the `home` component and `dashboard` feature module of an Angular project called `my-app`: ``` changedetector -p ~/projects/my-app -c home -m dashboard ``` This will inject a few lines of code into those components which will cause the component to log to console everytime they are re-rendered. ### Clean up To remove the inserted code, simply add `--undo`. _Eg. Removing from the `home` component and `dashboard` feature module._ ``` changedetector -p ~/projects/my-app -c home -m dashboard --undo ``` ### More Examples **1. _Apply `changedetector` on component_** ``` changedetector -p ~/projects/my-app -c home ``` **2. _Apply `changedetector` on feature module_** ``` changedetector -p ~/projects/my-app -m dashboard ``` **3. _Apply `changedetector` on component and feature module_** ``` changedetector -p ~/projects/my-app -c home -m dashboard ``` **4. _Apply `changedetector` on mulitple components_** ``` changedetector -p ~/projects/my-app -c home -c contact ``` --- _Source: https://npm.io/package/ng-changedetector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._