Tips & Tricks In Angular

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.

Comments

Post a Comment

Popular posts from this blog

Model Mapper in Angular

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Model Mapper in Angular . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Model Mapper It's a concept build based on AutoMapper from C#. While integrating with API, When we were required to map property. The Model Mapper requires Two things to do, ModelMapper Class PropertyMap Function. The ModelMapper class file as below, export class ModelMapper<T> { _propertyMapping: any; _target: any; constructor(type: { new(): T }) { this._target = new type(); this._propertyMapping = this._target.constructor._propertyMap; } map(source: any) { Object.keys(this._target).forEach((key) => { const mappedKey = this._propertyMapping[key]; if (mappedKey) { this._target[key] = source[mappedKey]; } else { this._target[key] = source[key]; } });
Read more

Implement Logging in Angular with Firebase

Hi Friends, This is Lakshman here. Welcome back to the Series Angular Best Practices Today, We will Implement Logging for your angular app . Every Application required Logging irresptive of Application. Its either Front-End or Back-End. For Back-End, we have lots of packages and SDK available for such as Serilog, Log4Net for .NET Core, Framework. However, In Front-End we need to Store your Logs somewhere in NoSQL Database where we can query the logs. Today we are going to use FireBase Cloud Database to Store our logging. As its Client-side SDK. Our other options are Application Insights (Microsoft Azure) JSLog with Seq. etc., Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here FireBase Account with Cloud Database - Click Here For Code Editor its VS Code. Implementation: We will go there the Implementation by Steps, Step 1: Create the Cloud FireBase Database - Click Here Step 2: Add Web Client for Project via Steps Step 3: Copy th
Read more

Dockerize Angular App for Dev

Hi Friends, This is Lakshman here. Welcome back to the Series Angular Best Practices Today, We will Dockerize your angular app for Development . Now as days, we develop application with multiple developers. Each one have there own Node.JS Environment. To Solve this issue we can containerize your application to run inside Docker. Pre-requisites: The pre-requisites are Install Docker - Click Here Node.JS - Click Here Angular CLI - Click Here Once Install Docker & Node.JS install Angular CLI via NPM Package Manager. Implementation: On your Existing Angular Application, Create a File Called Dockerfile.Dev Dev indicates for Development Docker File. Inside that Dockerfile.Dev, Copy the below code # Create a new image from the base nodejs 12.7 image. FROM node:12.7-alpine # Create the target directory in the image RUN mkdir -p /usr/src/app # Set the created directory as the working directory WORKDIR /usr/src/app # Copy the package.json inside the working directory COPY
Read more