DEV Community: Sanket Maru

Are your Angular Services Singleton ?

Sanket Maru — Sat, 09 Oct 2021 07:16:36 +0000

Angular has the concept of services which allows to share the data between components.

In this blog we will learn about service instances creation in Angular.

What happens when we inject service in root of a lazy module, is the same instance used for multiple lazy modules.

What if we want to have a separate instance per module and per component ?

We will use the same code example as used in common chunks example. If you haven't gone through that blog do checkout to learn on why common chunks are created.

Let's begin then.

Common Service Instance

Let's start where we ended in the previous post. We have two lazy modules user and account and currently share the same toast module which is built in a separate chunk.

As we have given as @Injectable({ providedIn: "root" }) for the toast service, a singleton instance of service is created and is shared among all the lazy modules.

As toast module is shared, we will have a common count of messages for both the modules.

Lets see it in action below -

Service Instance per Component

We can see the count of toast message is common and also toast module is included in the common chunk.

However, now we want to keep a count of how many times user clicks the button in a particular module. Individual count for user module and account module.

We will tweak the code in individual components and see how it behaves.

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.scss'],
  providers: [ToastService]
})
export class AccountComponent {
  ...code
}

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
  providers: [ToastService]
})
export class UserComponent {
  ...
}

Above code with create two instances of ToastService which will be respective to user component and account component.

Service Instance per Module

Great, we have multiple instance of service created and also toast module code is in common chunk.

As its seen, the count is always reset to 0. This is because the service instance is getting destroyed as soon as component is destroyed. When user navigates to a new route, earlier component is destroyed and new is created.

As we are creating instance at component level, we get a new instance every time. This might be useful if we want to reset the count.

To solve this we will create the instance at module level, so it will have a single instance for a particular module and also code will be served from common chunk.

To do this add ToastService in providers section of module which can be done from code as below -

@NgModule({
  declarations: [
    UserComponent
  ],
  imports: [
    CommonModule,
    UserRoutingModule,
    ToastModule
  ],
  providers: [ToastService],
  exports: [ToastModule]
})
export class UserModule { }

@NgModule({
  declarations: [
    AccountComponent
  ],
  imports: [
    CommonModule,
    AccountRoutingModule,
    ToastModule
  ],
  providers: [ToastService],
  exports: [ToastModule]
})
export class AccountModule { }

Let's see now in action how the behaviour is.

Great, now we have service instance per module and it stores the count for a particular lazy module.

Service Injection at App Root

Coming to the last case if we include toast service to the main app module.

This can be done by importing in providers section of app module.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ToastModule
  ],
  providers: [ToastService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Lets see the demo.

With this, now we have 3 instances of toast service.

For App Module
User ( Lazy ) Module
Account ( Lazy ) Module

Even if don't have the providers section in main app module, it will still have three separate instance for app and respective lazy modules as in service injectable we have providedIn as root.

For all modules present in app module, it would use instance of the app module one and instances of lazy modules would be separate.

This is because Angular creates separate injector tree for lazy module.

So, with this post we have learned scenarios in which a common service instance can be used per module or a component or by have it at root level.

Complete code can be found at my GitHub branch service_creation.

Thanks for checking this blog and let me know if you find it useful.

Common chunks in Angular

Sanket Maru — Sat, 02 Oct 2021 17:28:59 +0000

This blog summarises on use case in which common chunk is created in an Angular application.

We will start by creating a new angular application using ng new my-app command present in cli.

In this application we will have a toast module which will show toast on click of a button.

We will load toast module inside multiple modules and check how its shipped to the user.

It doesn't included basic Angular commands like creating component, module.

Let's start then.

Add toast module in main app

As a first use case we will include the toast module in the main app module.

The toast module has a component and a service which is used to create the message and can be called by outside module where its injected, in our use case its app module.

As we have injected toast module in main app module its included in main chunk of angular app.

Toast module in a lazy module

Next we will create a user module where we will import toast module.

We can lazily load module in Angular using loadChildren in routes as done below.

const routes: Routes = [{
  path: 'user',
  loadChildren: () => import('./user/user.module').then(m => m.UserModule)
}];

We will create a router outlet in main app component template so that this module can be loaded on click.

We then have to create a routing module for user module so when user lands on user route, a component is shown.

const routes: Routes = [
  {
    path: '',
    component: UserComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

RouterModule.forChild is used for any child routes in Angular.

We are ready with complete definition of user module and import it in App Module imports

@NgModule({
  declarations: [
    UserComponent
  ],
  imports: [
    CommonModule,
    UserRoutingModule,
    ToastModule
  ]
})
export class UserModule { }

As we have included toast module in user module and its lazily loaded its included in user chunk which is done by default in Angular.

If you want to try out, you can find code in this branch lazy_user_module

Toast module in another lazy module

Now we will create another lazy module which is account module and have account routing module similar to user module.

Account Module looks as below which has its own routing module and also imports toast module.

@NgModule({
  declarations: [
    AccountComponent
  ],
  imports: [
    CommonModule,
    AccountRoutingModule,
    ToastModule
  ]
})

This is how app routing code looks now -

const routes: Routes = [{
  path: 'user',
  loadChildren: () => import('./user/user.module').then(m => m.UserModule)
}, {
  path: 'account',
  loadChildren: () => import('./account/account.module').then(m => m.AccountModule)
}];

As you can see toast module is included in both the lazy modules user and account.

Does Angular includes it in main bundle so it's available to all lazy routing modules ?

No, doing so, it will increase the initial load time as it's not needed until user or account route is visited.

Angular smartly creates a new common chunk which only includes the toast module, so if account route is visited first, it will load toast module otherwise user route will load when visited.

From above screen shot it can be seen that a common chunk is created which has toast module code, user and account module code is separate.

From this we have learnt how smartly Angular takes care of performance ( uses internally webpack configuration ) by segregating common code in common chunk and keeping minimum code to be shipped up front to user.

This is all done by default in Angular and no separate configurations are needed.

The complete code can be found lazy_user_account_module.

Import once Browser Module

Sanket Maru — Sat, 08 Feb 2020 07:02:28 +0000

Problem Statement

In one of the existing projects i worked on, i was given a task of improving the performance of an Angular App.

First thing i looked on is if the major routing modules are lazily loaded or not. Sometimes developers make basic mistakes.

As i was navigating through the code found, i found none of the modules are lazy loaded due to some x reason. This was the chance to improve upon as client would be un-necessary downloading the code he would never want to go on.

As i extracted the components and created a lazy module, i imported MaterialDesignModule from the codebase which would imply it had all the material library related modules. Once imported my app would stop working and below error could be see on console.

Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.**

This error is self explanatory and tells us that BrowserModule has already been loaded and it does not need to be loaded again. if its needed in any other module or a lazy loaded module then CommonModule should be imported.

Solution

I tried to find the BrowserModule, but it had been imported only once. So there is another module BrowserAnimationsModule which exports BrowserModule with additional providers useful for animations.

Importing BrowserAnimationsModule in your app module will mean that all your module will have animation enabled and you are ready to use.

To solve the error remove BrowserAnimationsModule from any other modules and import it in AppModule.

AppModule

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})

LazyModule

@NgModule({
    declarations: [LazyComponent],
    imports: [
      LazyRoutingModule,
      // Dont import BrowserAnimationsModule inside child module
      // BrowserAnimationsModule
    ],    
})

Other problem was that the MaterialDesignModule in codebase had mixed responsibilities as it imported BrowserAnimationsModule too.

A bit of refactoring and cleaning the code is a part of developer journey.

Code was refactored to have MaterialDesignModule just consisting of Material modules and main AppModule has BrowserModule, BrowserAnimationsModule.

Also CommonModule needed to be imported in Lazy module as it required *ngIf directive.

Though if you feel that any of your module does not need animation, Angular provides a clean way of disabling it by importing NoopAnimationsModule

I will post more on Animations in Angular in my upcoming posts

Dynamic Side navigations in Angular

Sanket Maru — Thu, 31 Oct 2019 06:52:55 +0000

This blog posts talks about creation of SideNav Navigations using Dynamic Components In Angular.

Creation of dynamic components involves using Angular Dynamic Components and also using Typescript's Generic feature.

Before we begin with the tutorial, we need to understand what are dynamic components and using Generics in Typescript language.

Dynamic Components

Dynamic components are the one's which are not defined in any Angular template or inside any Angular component template. They are instantiated at run time.

If they are not required in any Angular Template, then you might think they should not be declared in the components array of module, so they are not available in build.

Correct, Angular defines this components to be declared in entryComponents, so they are available in build and gets instantiated at run time.

More information about entry components here

Generics

We will understand Generics with an example. Consider below class in Typescript

  class Stack {
    public arr = [];
    public push(item: any) {
      // code
    }
    public pop(): any {
      // code
    }
  }

  class StackConsumer {
    const stack = new Stack();
    stack.push(2);
    stack.push('hello');
    stack.pop(); // Type here can be number, string, object depending upon the popped item
  }

The problem here is that consumer can push any type of items and popped item can be a string, number, object.

Here is where Generics help us to define the Type of the Class with a parameter T.

  class Stack<T> {
    public arr: T[] = [];
    public push(item: T) {
      // code
    }
    public pop(): T {
      // code
    }
  }
  class StackConsumer {
    const stack = new Stack<number>();
    stack.push(2);
    stack.push('hello'); // not allowed
    stack.pop(); // Type here can be number only
  }

Here we have enforce the Type of the class and its member and we can create objects with the required type.

To summarise, Generics help us to create classes or Components in Angular that can be used with variety of Types instead of using a single Type.

To know how you can use Generic Types with various Data Structure implementations visit here

Dynamic Drawer Component

Before creating any components and understanding how this works, its important to have a use case in front of use.

It can be as simple as if user searching from a particular list and selecting one of the options which redirects him to a particular route and renders that sidenavigation option in sidenav.

We will create a component using Angular Material Sidenav. This component will contain a sidenav container where all drawer items will be added.

<!-- drawer.component.html -->
<mat-sidenav-container class="sidenav-drawer">
    <mat-sidenav mode="side" opened>
        <ng-container #vc></ng-container>
    </mat-sidenav>
</mat-sidenav-container>

Next, we will create a drawer item which will be a simple div with the drawer name.

<!-- drawer-item.component.html -->
<div class="drawer-item">
    {{ name }}
</div>

We are ready with the basic components which will render the side navigations. Now to display name of navigation or pass the data we will make help of Generics and basic OOPS concepts.

First we will create an abstract class DrawerBaseComponent which contains the Type and data to be passed along.

export abstract class DrawerBaseComponent<T = any> {
  public type: Type<T>;
  public data: T;
}

Now, lets create DrawerItemComponent which will extend above DrawerBaseComponent and accepts Generic parameter to accept any type. We have created a custom object of type DrawerItemContent which has a variable name.


export interface DrawerItemContent {
  name: string;
}

export class DrawerItemComponent extends DrawerBaseComponent<DrawerItemContent> implements OnInit {
  public name: string;
  ngOnInit() {
    this.name = this.data.name;
  }
}

We will create an interface DrawerConfig which helps to create components with the particular config and also make sure that DrawerConfig only accepts components which extends DrawerBaseComponent, so components of any other types cannot be instantiated and enforces a type safety.

export interface DrawerConfig<T extends DrawerBaseComponent = any> {
    // The type of the component to construct
    type: Type<T>;

    // The data can be anything passed by the implementor to configure the component.
    // The component would need data so html would render it.
    data: T;
}

Now, we will consume DrawerConfig, DrawerItemComponent in the app component where sidenav components will be used.

We pass components as an Input Parameter to the drawer component. In app.component.ts we initialize the components as a DrawerConfig which has a type as DrawerItemComponent.

<!-- app.component.html -->
<common-drawer [components]="components"></common-drawer>

// app.component.ts
public components: [DrawerConfig<DrawerItemComponent>, DrawerConfig<DrawerItemComponent>] = [
    {
      type: DrawerItemComponent,
      data: {
        name: 'First Component'
      }
    },
    {
      type: DrawerItemComponent,
      data: {
        name: 'Second Component'
      }
    }
];

Now inside drawer components when this components are loaded, they are dynamically created inside a view container.

It can be seen in the drawer.component.html above, we have used a #vc which is a view container where we will create the dynamic components.

private initComponents(): void {
    if (!this.vc) {
      console.log('View container not found, components not loaded');
      return;
    }
    // clear existing view container and reload the components
    this.vc.clear();
    this.components.forEach( (drawerComponent: DrawerConfig) => {
      const factory = this.resolver.resolveComponentFactory(drawerComponent.type);
      const componentRef = this.vc.createComponent(factory);
      const component = componentRef.instance;
      component.data = drawerComponent.data;
    });
  }

First we have checked if view container is present or not. Then for all the components received, we create factory using resolveComponentFactory function which accepts a type which is nothing but a constructor function or a class.

The Type is imported from @angular/core and we have defined as a required variable in DrawerConfig when the components are passed to the common-drawer component.

After creating a factory, we call createComponent which instantiates a single component and inserts its host view into this container. We have already created the host view that is #vc.

We assign the data using component reference instance which contains the name as First Component and Second Component.

This makes our task easier to define the side navigation components dynamically as we want. They will get destroyed and created depending upon the components you pass.

Handle Routing

Now we have basic application ready with the drawer items defined. To define the routing we will change the data passed to the DrawerItemComponent.

export interface DrawerItemContent {
  name: string;
  route: string;
  content$: Subject<string>;
}

Above route will be a route path and content$ is a subject which application will subscribe to whenever any drawer item is clicked.

goToRoute() {
  this.data.content$.next(this.data.route);
}

Once the sidenav is clicked we call the next of subject.

This subject is created in our app which gets called whenever there is a change.

public content$ = new Subject<string>();
public components: [DrawerConfig<DrawerItemComponent>, DrawerConfig<DrawerItemComponent>] = [
  {
    type: DrawerItemComponent,
    data: {
      name: 'First Component',
      route: 'first',
      content$: this.content$
    }
  },
  {
    type: DrawerItemComponent,
    data: {
      name: 'Second Component',
      route: 'second',
      content$: this.content$
    }
  }
];
this.content$.subscribe( (data) => {
  console.log('data in app component', data);
  // handle the logic to route
  this.router.navigate([data]);
});

Demo

Source

For simplicity, complete code is not defined in the blog.

The complete source code for the drawer component is created in a ng-library and can be found at ng-lib-sank.

This component is consumed in angular-labs, inside app.component.ts.

Hope this helps you in understanding dynamic components and the use case of creating side navigation components on the fly.

Whitespaces are Evil..How Angular translates your string ?? Guidelines and best approaches for handling i18n in Angular

Sanket Maru — Thu, 25 Jul 2019 03:01:39 +0000

A Brief Overview

Developers come across the scenarios what if

Whitespaces are added to your string and how those strings gets translated.
How are numbers , dates, percentages translated.
How can we give i18n texts for button. Whats the best approach so translation files doesn't have duplicate entries.

Angular supports Internationalization very well and the official documentation has setup and different cases where i18n should be handled.

This post covers the scenarios where developer needs to take care of i18n whenever new code is submitted.

This post is for both the developers and ones who review the Pull Requests if below recommendataions are not met

Recommendations

Each visible English string in HTML code should be tagged with i18n

<h2 i18n="Page Heading"> Examples of Internationalization(i18n) </h2>

Mostly all such visibile lines should be placed in HTML and not in TS files.

Along with i18n tag it is recommended to add a meaning and description to a string which helps the translation team to translate in a better way

<ul>
  <li i18n="First Name|First Name of candidate">First Name</li>
  <li i18n="Middle Name|Middle Name of candidate">Second Name</li>
  <li i18n="Last Name|Last Name of candidate">Last Name</li>
</ul>

We will consider a case where just i18n tag is given and when meaning and description is also given for the same type of html code.

<ul>
  <li i18n>First Name</li>
  <li i18n>Middle Name</li>
  <li i18n>Last Name</li>
</ul>

<ul>
  <li i18n="First Name|First Name of candidate">First Name</li>
  <li i18n="Middle Name|Middle Name of candidate">Second Name</li>
  <li i18n="Last Name|Last Name of candidate">Last Name</li>
</ul>

When messages file are generated for each of them entries are added. So as for the above snippets same code is there but it adds un-necessary entries in messages files. This marks as a first red flag for developer to check for similar code in the code base and have a single entry for them.

Apply i18n tag at the parent tag when you have nested tags

<div i18n="Signup success|Success message for signup ">Your signup is successfull.
<span><strong>Please verify your email address</strong> to continue.</span>
</div>

Enclosing at parent tag ensures that text is properly translated as a single sentence would
have a different meaning as compared when broken into multiple sentences.

Angular takes care of interpolation when dynamic parameters are found with in the string

<div i18n="License status|Different statuses of licenses">License {{ licenseStatus }}</div>

It is recommended that you do not use colon character ( : ) in strings. Some languages do not convert it.
If you have a string with {{ firstName }} {{ lastName }}, it needs to be internationalized using i18n tag as some locales have different rules for formatting names.
Angular pipes needs to be used to format numbers, dates, and percentages.
Whitespaces are evil. Ensure whitespaces are not added to your string as " demo text" and "demo text " will result into two things to translate
Buttons
Over the complete application most of the button texts are similar. So buttons should be tagged with a static id , so that there are no duplicate translations and similar ids are used all over the codebase.

Below are some of the buttons which are commonly used and an example to use the static ids.

<button (click)="cancel()" i18n="Cancel forgot password|secondary button@@btnCancel">Cancel</button>

Button	Id
Cancel	btnCancel
Close	btnClose
OK	btnOk
Save	btnSave
Yes	btnYes

Hope this article helps to include the points in the UI guidelines on i18n.

Wrote my first babel plugin!( Its Simple )

Sanket Maru — Sat, 22 Jun 2019 02:40:32 +0000

To write a babel plugin first you need to understand how babel plugins work. I will write down the things i required to write the plugin :-

Go through the basics of Babel-handbook. Basics will help to understand what is an AST, parsing, traversal of AST (Stages of Babel).
Play with Ast-explorer This will help to identify the different visitors of AST and which visitor you want to catch them to manipulate the paths.
Setup a CRA (create-react-app) or a simple node project with a webpack config createapp.dev is useful to get things done fast.
Debug, debug and debug........ Debug other plugins code. Setup vscode to debug the babel plugins inside node_modules. I will be covering a seperate blog on debbuging plugins and difficulties i faced developing a babel plugin Below is my vscode launch.json

  {
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/scripts/build.js"
  }

Motivation

There are chances that some part of your code doesn't get executed on a mobile device and functionality is completely hidden from the user. The code still resides in the bundle and is downloaded by the user.

This babel plugin will remove the code developer has marked it as desktop and will never be included in the chunk.

How do you do it ? Its Simple..

visitor: {
    Program(programPath) {
      programPath.traverse({
        ClassMethod(path) {
          if (path.node.key.name.endsWith(classMethodEnv)) {
            path.remove();
          }
        },
        JSXElement(path) {
          path.node.openingElement.attributes.forEach(ele => {
            if (ele.name.name === jsxEnv)
              path.remove();
          });
        }
      });
    }
  }

We want to transform the AST such that every Class Method and JSXElement gets visited and removed if it matches the condition.
Babel: Visitors

I have made the plugin use a Program(path) visitor, and then do a path.traverse for all the visitors. This is done to explicitly process the whole file at the first chance plugin gets. If this is not done then it doesn't ensure ordering of plugins and your visitor might not get visited as it has been compiled to a different state by other plugins.

Other option you can make your plugin work is to use a Class visitor and traverse for the class methods from there.

Now that we are done with the plugin, we will be using it a react app to test it out.

Published as a npm library here

Usage

Your React Component

export default class App extends Component {

handleClick_mobile() {
  console.log("Mobile Handle Click");
}

handleClick_desktop() {
  console.log("Desktop handle Click");
}

render() {
  return (
    <div>
      <table>
        <tr data-mobile onClick={this.handleClick_mobile.bind(this)}>
          <td>Mobile</td>
        </tr>
        <tr data-desktop onClick={this.handleClick_desktop.bind(this)}>
          <td>Web</td>
        </tr>
      </table>
    </div>
  );
}
}

will be transpiled to :-

export default class App extends Component {

handleClick_mobile() {
  console.log("Mobile Handle Click");
}

render() {
  return (
    <div>
      <table>
        <tr data-mobile onClick={this.handleClick_mobile.bind(this)}>
          <td>Mobile</td>
        </tr>
      </table>
    </div>
  );
}
}

Above, the plugin has removed the tr which has a name of data-desktop and class method ending with _desktop

We have passed the env vars to the plugin as

plugins: [
[require.resolve('babel-plugin-mobile-optimizer-react'), {
  "JSX_ENV": "data-desktop", // remove jsx code matching with name as data-desktop
  "CLASS_METHOD_ENV": "_desktop" // remove class method ending with _desktop
}]
]

I hope this will help to write your own babel plugin. Complete code can be found on my github repo

Plugin :- babel-plugin-mobile-optimizer-react
Usage in react app :- react-labs

In the next blog i will be mentioning about debugging the babel plugin and how you can setup vscode to debug it.