@angular-extensions/lint-rules

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

Description

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

Installation / Usage

• 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
  

Rules

The package includes the following rules:

Rule	Description	Details	Enabled by default?
angular-call-super-lifecycle-method-in-extended-class	Enforces the application to call parent lifecycle function e.g. super.ngOnDestroy() when using inheritance within an Angular component or directive.	Details	yes
angular-rxjs-takeuntil-before-subscribe	Enforces the application of the takeUntil operator when calling of subscribe within an Angular component or directive.	Details	yes

angular-call-super-lifecycle-method-in-extended-class

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().

Example

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;
    }
}

angular-rxjs-takeuntil-before-subscribe

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.

Example

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();
    }
}

Further reading

• 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

Contributors

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

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

Development

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.

Publish

To publish the package, run

npm run publish-package