Skip to content

tslint rules useful for angular projects

License

Notifications You must be signed in to change notification settings

angular-extensions/lint-rules

Repository files navigation

@angular-extensions/lint-rules

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

npm version npm downloads total npm downloads monthly CircleCI

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

Contributors

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