Skip to content

tslint rules useful for angular projects

License

Notifications You must be signed in to change notification settings

angular-extensions/lint-rules

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
Feb 20, 2020
Feb 20, 2020
Mar 12, 2020
Mar 12, 2020
Feb 20, 2020
Sep 8, 2020
Feb 20, 2020
Mar 12, 2020
Feb 20, 2020
Dec 5, 2022
Dec 5, 2022
Feb 20, 2020

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