My angular practice checklist

angular-practice.md

Best Practices

• Do not leave console.log in your code unless it needed (for debugging in production).
• Always remove unuseful comments.
• Always provide Interface for both http request and response.
• Avoid using namespace if possible.
• Always remove unused imports.
• Consider using separated component instead of inheritence (and configure it via Input or route data).
• Limit usage for environment.ts to only in app.module.ts (use InjectionToken), this make your module flexibilty to move later in the future.
• Consider configuring your api endpoint and default content type in HttpInterceptors instead of handling manually in services or components.
• Use Array.forEach instead of Array.map if you are not changing them.
• Only import rxjs components from rxjs and rxjs/operators.
• Avoid subscribe() and store result in class property, use async pipe when possible. (use withLatestFrom if you need its value in other observable stream)
• Do not use flatMap, use mergeMap instead.
• For any rxjs operations related to http, consider using switchMap instead of mergeMap
• Avoid using combineLatest as operator, use static combineLatest() instead.
• Consider using concat() + toArray() instead of one big forkJoin(), careless parallel network call can bring your backend down
• You might need share() operator if http observable is being used with async pipe
• Avoid using location service for navigation, always use router for navigation.
• Always use private with your DI if possible, and do not directly use theme in template.
• Always remove unused DI from your constructor.
• Always put one empty line between class methods
• Always use block comment instead one-line comment for class properties and method
• Do not use *ngIf="foo" along with *ngIf="!foo" to provide if-else manner, Use *ngIf="false; else something" when possible
• Consider adding ngx-translate loader Resolve to your root route, we can then safely use this.translate.instant() anywhere in our application
• We can safely use serviceWorker Nowaday for better speed and offline-capability
• If you have to subscribe endless observable. Don't forget to unsubscribe it in ngOnDestroy() (untilDestroy(this) can be helpful)
• Always use prop="value" for static binding instead of [prop]="'value'"
• Always disable button while it's working on http or the form is not valid
• Avoid complicated *ngIf expression, please consider using map() and add one shorthand property to it
• Do not store irrelevent data in ngrx store. (eg saving a whole http response to ngrx store is a bad idea, just store only needed data)
• Always use curry brace syntax for switch case
• Do not use both if and else, if one of them return a value (or return void), just handle the return first
• Use ngx-translate-extract to extract translation item, do not do it manually