Skip to content

Tips & Tricks in Angular

Jump to bottom
Lakshman.S edited this page Jul 25, 2021 · 1 revision

Hi Friends, This is Lakshman here.

As part of the Series "Angular Best Practices".

Today, We will Tips & Tricks in Angular.

Pre-requisites:

The pre-requisites are

Now, we are going to see some Tips & Tricks in Angular.

Tip No 1: Stable our packages

For machine critical applications, we need to stable our packages with a tilde(~) as below,

...
"ng-block-ui": "~3.0.2",
"rxjs": "~6.5.5",
"tslib": "~2.0.0",
"uuid": "~8.3.2",
"zone.js": "~0.10.3"
...

Tip No 2: Use npm audit weekly

Nowadays, npm Packages may be deprecated or consist of some vulnerabilities. So we need to audit our package on a weekly or monthly basis via the below commands,

npm audit

To Fix packages run below command,

npm audit fix

If you want to enforce all the changes, add --force like below,

npm audit fix --force

Tip No 3: Aware of Bundle size

To build our angular application, we always need to be aware of our end bundle size.

As angular as Single Page Application, we need to have its bundle size to a maximum of 2 MB.

If not, it leads to application performance and availability.

Whenever there is some possibility of assets make use of some cloud storage providers for such assets like images, SVG, etc.,

Tip No 4: Alias for Imports

While developing our application, we need to specify the full path of the file to use on other modules.

Instead, we can create some paths on tsconfig for easy access as below,

...
"baseUrl": "./",
"paths": {
    "@core/*": ["src/app/core/*"],
    "@shared/*": ["src/app/shared/*"],
    "@environment/*": ["src/environments/*"]
},
...

On TS Files as below,

import { CoreModule } from '@core/core.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    CoreModule,
    ...
  ],
  ...

Tip No 5: Null check on String interpolation

While working with Object, always add some null check options when displaying some objects properties because it helps your page render smoothly.

Some examples as below,

...
<li *ngFor="let item of Status" [ngStyle]="{ color: getColor(item?.Status) }">
  {{ item?.Message }}
</li>
...

So these are all some tips & tricks in angular.

That wraps up the Tips & Tricks in Angular

You may also access to source code on GitHub by Click Here

On-road head, we will discuss a lot of things.

Looking forward to your comments and share your feedback.

Until that, I am Lakshman, Signing Off.

Clone this wiki locally