https://github.com/angular-extensions/lint-rules

This repository offers some tslint rules useful for angular projects, see Rules.

• Install the @angular-extensions/lint-rules npm package:

  npm install @angular-extensions/lint-rules --save-dev 

• Add @angular-extensions/lint-rules to the extensions list in your tslint.json:

  { "extends": [ "tslint:recommended", "@angular-extensions/lint-rules" ] }

• Lint your project with

  ng lint 

The package includes the following rules:

This rule tries to avoid memory leaks and other problems in angular components and directives by ensuring that a life-cycle method, e.g. ngOnDestroy(){}, overriding its parent implementation must call the parent implementation with super.ngOnDestroy().

This should trigger an error:

class MyClass { ngOnDestroy() { const a = 5; } } @Component({ selector: 'app-my' }) class MyComponent2 extends MyClass { ngOnDestroy() { ~~~~~~~~~~~ call to super.ngOnDestroy() is missing const b = 6; } }

while this should be fine:

class MyClass { ngOnDestroy() { const a = 5; } } @Component({ selector: 'app-my' }) class MyComponent extends MyClass { ngOnDestroy() { super.ngOnDestroy(); const b = 6; } } @Component({ selector: 'app-my2' }) class MyComponent2 { ngOnDestroy() { const b = 6; } }

This rule tries to avoid memory leaks in angular components and directives when calling .subscribe() without properly unsubscribing by enforcing the application of the takeUntil(this.destroy$) operator before the .subscribe() as well as before certain operators (shareReplay without refCount: true) and ensuring the component implements the ngOnDestroy method invoking this.destroy$.next(). All classes with a @Component or @Directive decorator and all their parent classes will be checked.

This should trigger an error:

@Component({ selector: 'app-my', template: '<div>{{k$ | async}}</div>' }) class MyComponent { ~~~~~~~~~~~ component containing subscribe must implement the ngOnDestroy() method k$ = a.pipe(shareReplay(1)); ~~~~~~~~~~~~~~ the shareReplay operator used within a component must be preceded by takeUntil someMethod() { const e = a.pipe(switchMap(_ => b)).subscribe(); ~~~~~~~~~ subscribe within a component must be preceded by takeUntil } }

while this should be fine:

@Component({ selector: 'app-my', template: '<div>{{k$ | async}}</div>' }) class MyComponent implements SomeInterface, OnDestroy { private destroy$: Subject<void> = new Subject<void>(); k$ = a.pipe(takeUntil(this.destroy$), shareReplay(1)); someMethod() { const e = a.pipe(switchMap(_ => b), takeUntil(this.destroy$)).subscribe(); } ngOnDestroy() { this.destroy$.next(); } }

• https://slides.com/estebangehring/angular-app-memory-leak
• https://blog.angularindepth.com/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0
• cartant/rxjs-tslint-rules#107

• Esteban Gehring (@macjohnny)
• Lutz Bliska (@lbliska)
• Kevin Kreuzer (@kreuzerk)

Note: this project is based on work in cartant/rxjs-tslint-rules#107

Clone the repository and install the dependencies with npm install.

Note: using the build artifacts with npm link does not work correctly, since there will be a mismatch between the typescript version used by the consumer code and the typescript version used by the lint rules code. To test the package in a project, run

npm run build cd dist npm install --production 

Then copy the content of the /dist folder (including the node_modules folder) into node_modules/@angular-extensions/lint-rules in the consumer project.

To publish the package, run

npm run publish-package