@angular-extensions/lint-rules

tslint rules useful for angular projects

Showing:

Popularity

Downloads/wk

1.7K

GitHub Stars

36

Maintenance

Last Commit

2mos ago

Contributors

3

Package

Dependencies

2

Size (min+gzip)

0.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

@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:

RuleDescriptionDetailsEnabled by default?
angular-call-super-lifecycle-method-in-extended-classEnforces the application to call parent lifecycle function e.g. super.ngOnDestroy() when using inheritance within an Angular component or directive.Detailsyes
angular-rxjs-takeuntil-before-subscribeEnforces the application of the takeUntil operator when calling of subscribe within an Angular component or directive.Detailsyes

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 https://github.com/cartant/rxjs-tslint-rules/pull/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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial