DEV Community: Madhu Sudhanan P

Angular Dependency Injection — Inject service inside custom Rxjs operators

Madhu Sudhanan P — Sun, 24 Nov 2024 17:18:56 +0000

Angular is an opiniated framework. It’s really an excitement to see how its diverging towards developer flexibility and becoming stronger day by day. I believe it’s a happy era for the Angular lovers.

Dependency injection and RxJS — In my opinion, are powerful features which made Angular unique and flexible. RxJS custom operators are a great way to compose complex logic into reusable functions.

Recently I came across a usecase where I need to create a custom RxJS operator which uses service to achieve some complex usecase.

You can use inject method to access desired service instance, inject must be used within dependency injection context though. To achieve this, Rxjs operator can be registered as a InjectionToken which uses useFactory function to instantiate its value. Since useFactory is a injection context, the services can be injected without any problem using the inject method.

Let’s see how the below service can be injected in a rxjs custom operator.

// Service
@Injectable({
  providedIn: 'root',
})
export class Multiplier {
  public transfrom(val: number) {
    return val * 2;
  }
}

The below custom RxJS operator simply multiple the given value with 2 using the Multiplier service.

import { inject, InjectionToken } from '@angular/core';
import { Multiplier } from '../services/multiplier';
import { map, OperatorFunction, pipe } from 'rxjs';

export const MULTIPLIER_OPERATOR: InjectionToken<OperatorFunction<number, number>>
  = new InjectionToken('Multipler operator', {
    factory(): OperatorFunction<number, number> {
      const multipler = inject(Multiplier); // injected Multipler service
      return pipe(map((x: number) => multipler.transfrom(x)));
    },
  });

Now the custom operator can be used within the components using the @Inject decorator.

import { Component, Inject } from '@angular/core';
import { BehaviorSubject, Observable, of, OperatorFunction } from 'rxjs';
import { MULTIPLIER_OPERATOR } from './rxjs-operators/custom';
import { CommonModule } from '@angular/common';

export class App {
  private _count = 1;
  public base = new BehaviorSubject(this._count);
  public val = new Observable();

  constructor(
    @Inject(MULTIPLIER_OPERATOR) // injected custom operator
    private multiplier: OperatorFunction<number, number>) {
      this.val = this.base.pipe(this.multiplier); // used rxjs operator
  }

  .....
}

There are several other ways to achieve this same usecase like creating a separate service and a method that would return custom operator. But I like InjectionToken approach due to its self containability. RxJS isn’t going anywhere in near future even with introduction of signals so it’s worth experimiting on it.

You can see the full working example here.

Happy Coding…🎉

Angular — Deferred Loading using defer block — What you need to know

Madhu Sudhanan P — Sun, 01 Oct 2023 18:13:04 +0000

Lazy loading in Angular is an important feature that every developer should know. It helps load components/parts/code on demand and improves the UX by loading what is needed at the moment.

Angular Lazy loading was purely routing-based and to load non-route modules you need to use special code which involves importand ngComponentOutlet. Last year, I faced a similar challenge and achieved this in a possible declarative way. You can see this in the below post.

https://dev.to/madhust/lazy-loading-non-routable-angular-modules-imperative-declarative-pattern-3a33

The previous solution I used has some pitfalls and it’s not a 100% declarative way. But with the new @defer block syntax and standalone component, you can do the deferred loading in a much simpler and more declarative way.

Let’s see what’s new with the defer block.

Basic defer block

A basic defer block initialization will look like below. It does contain any condition so basically the content will be loaded immediately. In the following section, let’s see some complex examples using the defer block.

@defer {
  <app-defer></app-defer>
}

So how does the defer block lazy load its content? Basically during the compilation, the component(s) and its dependencies(directives, pipes, etc.) will be packed into a separate chunk and will loaded when the defer block conditions are met. You can see that in the below image.

Placeholder block

As the name implies, the @placeholder block will act as the placeholder for the content that will be defer loaded. This is an optional block.

<input type="checkbox" #check/>

@defer (on interaction(check)) {
  <app-defer></app-defer>
} @placeholder {
  <span>Loading</span>
}

You can mention the minimum time to show the placeholder block before swapping to the next component by using the minimum parameter.

In addition to the placeholder purpose, you might need to use a placeholder if you want to use a zero parameter interaction, hover, or viewport triggers. Now the placeholder block will act as a target for these triggers.

@defer (on interaction) {
  <app-defer></app-defer>
} @placeholder {
  <span>Loading</span>
}

The content of the @placeholder, @loading and @error are eagerly loaded.

Loading block

The next optional block that allows you to have a smooth transition to the next component is the @loading block.

@defer (on interaction(check)) {
  <app-defer></app-defer>
} @placeholder {
  <span>Placeholder</span>
} @loading {
  <span>Loading</span>
}

The content of the @placeholder, @loading and @error are eagerly loaded.

Error block

The @error block will render its content when any error happens during the loading of the deferred content.

<input type="checkbox" #check/>

@defer (on interaction(check)) {
  <app-defer></app-defer>
} @placeholder {
  <span>Placeholder</span>
} @loading {
  <span>Loading</span>
} @error {
  <span>Error Loading...</span>
}

The content of the @placeholder, @loading and @error are eagerly loaded.

Deferred loading conditions using on, when, and prefetch

I’d say that the Angular team did amazing work here by providing both declarative and imperative approaches to lazy load the content.

The declarative conditions can be provided using the on whereas the where allows the developer to provide their own logic.

<input type="checkbox" #check/>

@defer (on interaction(check)) { 
 <app-defer></app-defer>
}

@defer (when showSignal()) { // showSignal is a signal.
  <app-defer></app-defer>
}

Using on (Declarative trigger conditions)

You can use the following declarative trigger conditions to defer the load of your component.

immediate
idle
interaction/hover
viewport
timer

You can use multiple declarative triggers for a single defer block. All the trigger conditions are combined using OR logic. For instance, the below code will load content either the button is clicked or the checkbox is hovered.

<button #button>Load Defer Component</button>

<input type="checkbox" #check/>

@defer (on interaction(button), hover(check)) {
 <app-defer></app-defer>
} @placeholder {
  <span>Loading</span>
}

immediate

The immediate condition will load the defer block content immediately once the browser is ready.

@defer (on immediate) {
  <app-defer></app-defer>
}

idle

This is the default behavior of the defer block and would render the content when the browser is in an idle state.

@defer (on idle) {
  <app-defer></app-defer>
}

interaction

The deferred loading will start when the given element is interacted with. The interaction condition would accept a template reference variable as a parameter and will load its content when the element is interacted.

<input type="checkbox" #check/>

@defer (on interaction(check)) {
 <app-defer></app-defer>
}

So now you may have a question about the interaction. What are the events that are used for the interaction? At the time of writing this post, the interaction is decided by two events — click and keydown. Probably there will be more events to be supported in the future.

hover

The content will be loaded on the hover of the target element.

<input type="checkbox" #check/>

@defer (on hover(check)) {
  <app-defer></app-defer>
}

viewport

This is another fantastic declarative check to have. Now the defer block will load its content when the element specified in the viewport or the content itself is in the visible area.

<div #container>
  .....
</div>

@defer (on viewport(container)) {
  <app-defer></app-defer>
}

You can also mention the viewport condition to load its content when the actual content to be rendered is in the viewport area. But it will require you to mention the @placeholder block by which the framework will find the viewport enter event.

@defer (on viewport) {
  <app-defer></app-defer>
} @placeholder {
  <span>Loading</span>
}

timer

You can mention the timer trigger condition to load the content after a specific time. The below code will render the content after 2s.

@defer (on timer(2000)) {
  <app-defer></app-defer>
} @placeholder {
  <span>Loading</span>
}

Disclaimer: The timer logic was not yet added to the core package at the time of writing this post. Since the compiler support was added it will not show compile or runtime exceptions. Probably, this logic will be available in Angular v17.

Using when (Imperative trigger conditions)

Apart from using built-in trigger conditions, the developer can use when to provide any custom logic to load the defer block. In the below code, the canLoad method will return a boolean based on which the deferred content will be loaded.

export class AppComponent {
  . . . . . .
  public canLoad() {
    return true;
  }
}

@defer (when canLoad()) {
  <app-defer></app-defer>
}

You can directly use signals, public property, or methods in the when-trigger condition. You can also use logical operators to load based on multiple criteria.

export class AppComponent {
  showSignal = signal(true);
  show = true;

  public canLoad() {
    return true;
  }
}

@defer (when (canLoad() && showSignal()) || show) {
  <app-defer></app-defer>
}

Can we use observables in the when trigger?

I guess not, at the moment, passing observable to the when trigger, it always resolved as true. Using async pipe or toSignal also has no effect. Probably we can expect this in the main release or the Angular team might have a better explanation for this.

If you use async pipe, probably you will face the below error as I did.

@defer (when show | async) { // show = of(true)
  <app-defer></app-defer>
} @placeholder {
  <span>Loading</span>
}

Using prefetch

The developer can prefetch the deferred block chunk files before rendering them. The prefetch allows us to reduce the delay in loading the lazy chunk files which is required by the defer block.

The prefetch keyword is used to mention the prefetch condition in which the on and when can be used to mention the criteria required to prefetch the resource. A simple prefetch condition will look as below in which hovering the checkbox will prefetch the app-defer chunk file and will be rendered when the button is interacted.

<button #button>Load Defer Component</button>

<input type="checkbox" #check/>

@defer (on interaction(button); prefetch on hover(check)) {
 <app-defer></app-defer>
}

Mixing trigger conditions

You can use both on and when in a single defer block. All you need to ensure is that the on and when should be delimited by a semicolon ; as follows.

The trigger conditions between on and when are combined using the logical OR operator.

@defer (on interaction(button),hover(check);
        when (canLoad() && showSignal())) {
 <app-defer></app-defer>
} @placeholder {
  <span>Loading</span>
}

How to run the defer block in the Angular v17.0.0-next.6?

Check out the below blog post on how to enable and run the defer block example using Angular v17.0.0-next.6.

https://maddydeep28.medium.com/how-to-enable-the-new-control-flow-or-defer-block-in-the-angular-v17-0-0-next-6-6bbe29287cbe

Thanks for reading. If you like this article, please check out my articles here and follow me on Twitter(X) for more content like this.

How to enable the new control flow or defer block in the Angular v17.0.0-next.6?

Madhu Sudhanan P — Sat, 30 Sep 2023 13:45:49 +0000

Even though the new Angular control flows or the defer block changes are available on the release v17.0.0-next.6, you cannot directly use them now in your project and will end up with the below error.

error NG5002: Invalid ICU message. Missing ‘}’ 
or 
error NG5002: Unexpected character “EOF”
(Do you have an unescaped “{“ in your template?
Use “{{ ‘{‘ }}”) to escape it.)

To try a new control flow or the defer block now you have to add the below config in the angularCompileroptions.

{
  "angularCompilerOptions": {
    ....
    "_enabledBlockTypes": [
      "if", "switch", "for", "defer"
    ]
  }
}

_enabledBlockTypes is an internal one that will be changed eventually. But for now, it will allow you to play around with the control flows.

You can find the full working sample here.

Feel free to let me know if you have any comments.

Angular — New Control flow with a working example

Madhu Sudhanan P — Sat, 30 Sep 2023 13:34:36 +0000

If you are watching recent Angular works, you’d probably know the addition of new control flows with new syntax. The new control flow is planned for the Angular v17 release that would probably face the public in November 2023. More details on why @ is chosen can be found here.

In the Angular v17.0.0-next.6 release, the team has shipped the control flow changes which are not production-ready but we can play around with it.

Let's see what are the available control flows.

If else statement

In previous versions, NgIf is used to show DOM elements conditionally which is declarative but is not suitable for the new change detection strategy. The new @if block will resolve this problem and will work well with signal-based change detection.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  show = true;
  showAnotherIf = false;
}

@if (show) {
  <span>Inside if</span>
} @else if (showAnotherIf) {
  <span>Inside else if</span>
} @else {
  <span>Inside else</span>
}

For loop

The for loop allows you to render the given content based on the iterable object and it provides some useful context properties to work with. In addition, it provides a @empty block which will be rendered when no item is present in the given array.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  skills = ['javascript', 'html', 'css'];
}

<ul>
  @for (item of skills; track item; let i = $index, f = $first; let l = $last, ev = $even, o = $odd; let co = $count) {
    <li>{{item}}
      <ul>
        <li>Index - {{i}}</li>
        <li>Is First - {{f}}</li>
        <li>Is Last - {{l}}</li>
        <li>Is even - {{ev}}</li>
        <li>Is odd - {{o}}</li>
        <li>Count - {{co}}</li>
      </ul>
    </li>
  } @empty {
    <li>No item</li>
  }
</ul>

Switch case

The new switch case control flow can be used as follows. You can use @default block to mention the default content to be rendered when no case is matched.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  caseNo = 4;
}

@switch (caseNo) {
  @case (1) {
    <span>Rendering case 1</span>
  }
  @case (2) {
    <span>Rendering case 2</span>
  }
  @case (3) {
    <span>Rendering case 3</span>
  }
  @default {
    <span>Rendering default</span>
  }
}

How to enable the new control flow in the Angular v17.0.0-next.6?

Even though the changes are available on the package, you cannot directly use this now and will end up with the below error.

error NG5002: Invalid ICU message. Missing ‘}’ 
or 
error NG5002: Unexpected character “EOF”
(Do you have an unescaped “{“ in your template? 
Use “{{ ‘{‘ }}”) to escape it.)

To try the new control flows now you have to add the below config in the angularCompileroptions.

{
  "angularCompilerOptions": {
    ....
    "_enabledBlockTypes": [
      "if", "switch", "for"
    ]
  }
}

I got your mind's voice, yeah _enabledBlockTypes is an internal one that will be changed eventually. But for now, it will allow you to play around with the control flows.

You can find the full working sample here.

Feel free to let me know if you have any comments.

Angular Signals — Using the untracked() Function to Prevent Dependency Tracking

Madhu Sudhanan P — Tue, 12 Sep 2023 06:28:38 +0000

Before going through this article, if you are not familiar with Angular signals, I’d recommend reading my previous post on signals — Angular Signals🚦: New Change detection strategy.

For every change in the signal, computed and effect functions that are interested in the signal, will be recomputed & executed respectively. There are cases when we don't want this recomputation to occur for the signal change. In Angular signals, all the dependencies will run inside a reactive context, to avoid this recomputation, it should be run inside a non-reactive context.

Angular provided untracked function which allows you to execute any function in a non-reactive context and sometimes it will return values.

Let’s see some of the use cases of the untracked function.

Calculate the computed signal property only once

In some cases, you might want to have a computed signal that will compute its value only once and it will not care about further change. In such cases, you can use untracked function inside the computed signal to read signal value without tracking dependencies.

export class AppComponent {

  count = signal(1);

  revenue = computed(() => untracked(() => this.count() * 5));
}

In this above code, the revenue computed signal will be computed only once(value would be 5) based on its dependency count. For subsequent set operations, revenue will not recalculate and will remain in the same value.

Reading without tracking dependencies in effect method

This is a very common use that was pointed out by the angular team. You can use this method to have an untracked reading of the signal values inside the effect method so that for further change in the signal, the effect will not be invoked.

export class AppComponent {

  count = signal(1);

  revenue = computed(() => untracked(() => this.count() * 5));

  constructor() {
    effect(() => {
      console.log('Count effect invoked ' + untracked(this.count));
    });
  }

}

Unwrap signal value

Well, this is a very simple use case, you will probably not need it but I think it's worth mentioning. The untracked function will return a value that we can use. You can use this function to simply unwrap or execute any arbitrary function.

In the below code, nCount simply unwrap the signal value and factor will hold the result of the arbitrary function run inside the untracked function.

export class AppComponent {

  count = signal(1);
  users = signal(0);
  nCount = untracked(this.count)
  factor = untracked(() => { 
              const count = this.count();
              const users = this.users() || 5;
              return count / users;
            });

  revenue = computed(() => untracked(() => this.count() * 5));

  constructor() {
    effect(() => {
      console.log('Count effect invoked ' + untracked(this.count));
    });
  }

}

Is it possible to set/update/mutate any signal value without notifying the dependencies using an untracked function?

The answer is a big NO.

Setting or changing the signal values inside an untracked function will not prevent it from tracking and notifying the dependencies.

Setting the signal value inside the untracked function will track dependencies and notify the interested consumers.

In the below code, setting users signal inside the untracked function will not prevent it from notifying the consumers and the effect function that uses the users function will be called.

export class AppComponent {

  toggle = signal(true);
  count = signal(1);
  users = signal(0);
  nCount = untracked(this.count)
  factor = untracked(() => { 
              const count = this.count();
              const users = this.users() || 5;

              return count / users;
            });

  revenue = computed(() => untracked(() => this.count() * 5));

  constructor() {
    effect(() => {
      console.log('Empty effect method');
      // SETTING THE users signal 
      untracked(() => this.users.set(1));
    });

    effect(() => {
      // Will be called when 
      // users signal is set in the previous effect method.
      console.log('User effect invoked ' + this.users());
    });
  }

}

I hope you like reading this article. If you find it useful, please follow me on Medium or Twitter for content like this.

Happy coding…

Angular Signals🚦: New Change detection strategy

Madhu Sudhanan P — Tue, 12 Sep 2023 06:18:12 +0000

The hype around Angular signals is real. If you are an Angular user, I hope, you already know the answer. Signal is going to be the new change detection strategy.

There are many articles available online now that are deep-diving into the Signals concepts. I suppose it’s also worth sharing my understanding of the concept.

Change detection: What is the current state and What will be the future?

Angular is currently relying on the Zone js for the change detection. Zone Js will monkey patch various built-in APIs to notify the change in the application. If a new Web API is introduced in JavaScript then Zone Js has to be updated by monkey patching the new API so relying on Zone Js is not a future-proof solution.

Another major setback with this approach is that there is no information about the component that is responsible for the change and what changed in the model. Due to this, to reflect the model changes in the DOM, the application has to traverse from top to down to identify and apply the changes. The component traversal can be customized by the OnPush change detection strategy though.

Also, many users like to have zoneless applications and various experiments can be seen online.

To tackle these problems, Angular started to revisit its current change detection strategy which results in the signals concepts that provide fine-grained control over the component change detection.

Signals bring the below advantages to Angular.

Updates only the components that interest the model value change by providing the information on the model change.
Removes top-down component traversal. It only updates the component that uses the signal.
No dirty monkey patching of global methods/APIs.

Building Blocks of Angular Signal

The below items are the major building blocks of the Angular signal.

Signal
Computed signal
Effect

What is signal?

Signal is a lightweight wrapper around a value that notifies the value changes to the interested consumers. It comes with several methods that allow us to set, update, and mutate its value.

You can initialize the signal value by using the signal method.

export class AppComponent {
  count = signal(0);
}

set method can be used to change the initialization value of the signal. The signal value is changed to a new value in the resetView method.

export class AppComponent {

  count = signal(0);

  resetView() {
    this.count.set(0);
  }
}

update method will help you to change the value based on the previous value.

export class AppComponent {
  count = signal(0);

  addView() {
    this.count.update(val => val + 1);
  }

  resetView() {
    this.count.set(0);
  }
}`

mutate method will allow you to mutate the signal in its place and notify its dependencies.

Computed signal properties

Another interesting part of the signal is the computed signal properties. The computed signal is a long-requested feature in Angular and, introducing it as a part of the signal has major advantages for both developer experience and performance of the application.

The computed function can be used to create a computed signal property.

export class AppComponent {

  count = signal(0);

  revenue = computed(() => this.count() * 0.5);

  addView() {
    this.count.update(val => val + 1);
  }

  resetView() {
    this.count.set(0);
  }
}

The computed signal property has the following behavior.

Computed properties are lazily initialized. The computation will not happen until the value is accessed.
It shuffles the dependency graph dynamically based on the dependency signal change. Angular is being cautious in the dynamic dependency graph since the frequent setting of the dependency graph will come at a cost.

Effect

The effect function allows you to listen to the signal changes and act based on them. The effects can be used to handle some use cases like,

Custom updating DOM after one or more signals are changed.
Trigger network requests.

The effect will auto-subscribe itself based on the signals used in its context. For example, the below list of effect methods used in the constructor will be called in various signal changes.

export class AppComponent {
  count = signal(0);
  user = signal(0);

  constructor() {
      effect(() => {
        console.log('Empty effect method');
      });

      effect(() => {
        console.log('User effect invoked ' + this.user());
      });

      effect(() => {
        console.log('User and View effect invoked ' + this.user() + ' ' + this.count());
      });

      effect(() => {
        console.log('Count effect invoked ' + untracked(this.count));
      });
  }

  addView() {
    this.count.update(val => val + 1);
  }

  userChange() {
    this.user.update(val => val + 1);
  }

  resetView() {
    this.count.set(0);
  }
}

This effect method will be called only once since no signal property is used in its context.

effect(() => {
  console.log('Empty effect method');
});

The below effect will be called whenever the user signal is changed.

effect(() => {
  console.log('User effect invoked ' + this.user());
});

This callback will be invoked when either the user or count signal is changed.

effect(() => {
  console.log('User and View effect invoked ' 
               + this.user() + ' ' + this.count());
});

This effect method will be called when the very first time the count signal is set then it will become inert since the count is wrapped in the untracked method. This method will help you execute the signals inside a non-reactive context.

effect(() => {
  console.log('Count effect invoked ' + untracked(this.count));
});

Using signals in the templates

The angular team chooses the getter function approach to use signals inside the templates.

<div>
  <span>Unique users: </span>
  <span>{{users()}}</span>
</div>

The team sees some clear advantages in using the getter function approach like it implies that it is meant for read operation and maintains consistency between the component and template files.

Over the years Angular developers learned not to use functions inside the template since it would have a considerable performance impact if the method did some heavy work. But it's not the case with signals since they are built to do computations in a minimal way.

Upcoming works — signals

Well, signals in Angular is a bit large topic and I just covered a very small part of it. The angular team is still working on introducing several changes in the input/output, control flow and defer loading to improve the developer experience and ability to add Zone-less(Fully signal)-based applications in the future.

If you find this article helpful, please follow me here and on twitter for more content like this.

Happy coding…

Stateless standalone components in Angular

Madhu Sudhanan P — Tue, 07 Jun 2022 15:43:16 +0000

Such an exciting week for the angular community since the Angular v14 is released. Angular v14 is packed with amazing works like Typed reactive form, Page title resolver, standalone component, inject function, etc.

Standalone component & inject function interests me more than anything as it's paving the way to reactify the angular. The term "reactify" may be funny but these features will give the developers who shifted to React will allow them to look back to the Angular once again and this term made me think about another popular terminology of React, Stateless component.

Stateless component is enforced in React and it's being part of the framework. When comes to angular, stateless components are not popular as in react. Since the standalone component has been introduced to the Angular, I suppose, the Stateless Standalone component will also be a talk in near future.

So how to make your angular component stateless?

I think the answer is very simple.

"DON'T MUTATE THE INCOMING PROPERTIES".

All the mutations should be handled at the container/parent component. That's it. Now your angular component will become stateless or presentational or any other name you call it.
Let's see how a stateless component can be implemented in angular.

The above component is a simple stateless standalone component in which title property is not mutated inside the component rather the changes have been emitted to the parent component. The parent component which will act as the container component will handle the mutation.

The stateless component provides several advantages such as below.

Less code and easy to maintain.
Performance - When combined with the OnPush strategy, the stateless component might provide better performance.
Easy to test since the result will be the same for input and no side effects.
Ensure a single source of truth when working with state management libraries.

Now we have seen how to create a simple stateless component but there is a chance that another developer makes the component stateful which is meant to be stateless.

StatelessComponent decorator

StatelessComponent decorator of the @protools/angular package will help you to ensure and maintain the statelessness of your angular component by respecting this simple rule "DON'T MUTATE THE INCOMING PROPERTIES".

To make your angular component stateless simply add the StatelessComponent decorator from the @protools/angular package.

Exclude methods

You can exclude methods from preserving the statelessness of the component which means you can change the input properties within those methods. To exclude any method, provide the excludeMethods option of the StatelessComponent decorator. This helps you to provide two-way binding support for a property.

That's it. Now your component became stateless and it will ensure the statelessness during further changes too.

Take a look at the @protools/angular package below and give it a try.
https://www.npmjs.com/package/@protools/angular

Feel free to contact me. Happy coding!!

Lazy loading non-routable Angular modules — Imperative & Declarative pattern

Madhu Sudhanan P — Sun, 01 May 2022 03:59:26 +0000

Lazy loading modules in angular enable us to split code into separate modules and load them on demand, this helps developers to have maintainable code and better performance.

By default, angular lazily load modules based on the route path. Lazy loading modules based on the route path suits most cases but sometimes you might want to load a module irrespective of the route path. Some of those cases are as follows.

Load on button click without route change.
Load multiple modules for the current route. In such a case one module can be loaded based on the router & others can be loaded manually.
Dynamically insert components on some criteria.

In this post, I am going to show, how to lazily load modules manually in both imperative & declarative (less imperative) ways. Following the declarative way is important when comes to frameworks since it ensures whether the application has less code and is unit testable.

In terms of frameworks, simply being declarative is leaving the framework to handle things by declaring required syntaxes in the template (as I understand). When I started to learn the differences between imperative and declarative ways, I understand that writing things in the *component.ts file will make you more imperative.

Let’s get started!!

Imperative

The below code loads modules and renders them into the view imperatively.

The reasons which make this imperative are as follows.

The first thing that makes this code imperative is, manually subscribing to the loadModule method.
Next, I see we are compiling the module, registering the injector & resolving the component.
Appending the component in the ng-container using the ViewContainerRef.

Declarative (Less imperative)

Now let’s see the declarative version of the above component and template file. Also, I would say it is less imperative instead of declarative since I am using some RxJS operators & manually loading the module using load property.

Well, I believe you can see the difference here.

First thing, lines of code are reduced.
Removed injection of Compiler.
Removed manual compiling, injection & component resolving.
Removed manual appending of the component using ViewContainerRef.

Thanks to Angular!. All the above things comes possible because of the introduction of the ngComponentOutletdirective. In the above code, I am simply loading the module & resolving the component property after the module loaded successfully.

Wrap it up

Out there, I can see there are many blog posts showing different ways to lazy load non-routable modules in angular and you can choose them based on your application scenarios.
You can find the full source code in this GitHub repo. I hope, you have learned something from this blog as I did.

Thanks for reading. Happy coding. Feel free to contact me if any.

Conditionally lazy load modules in Angular

Madhu Sudhanan P — Fri, 22 Apr 2022 07:38:21 +0000

The lazy loading module is an important feature that helps to improve the performance of an Angular application. This feature is amazing and resolves most of the use cases.
Recently, I faced a user scenario where I need to load a module for a route path conditionally. The scenario is that if a user is assigned with some permission, then load a module or load another module.
The use case seems legit, but I was unable to achieve this using the current lazy loading module feature.
In the current lazy loading feature, we will use loadChildren property to load the required module. The caveat here is that loadChildren doesn’t provide any argument or injectable services which limit us from conditionally loading modules.

const routes: Routes = [{
       path:'view',
       loadChildren: () => import('./modules/view/view.module')
                                .then(x => x.ViewModule)
}];
@NgModule({
   imports: [RouterModule.forRoot(routes, { useHash: true })],
   exports: [RouterModule]
})
export class AppRoutingModule { }

To tackle this, I am using the router events to change the loadChildren method definition. We can listen for the RouteConfigLoadStart event which will be triggered before loading the lazy modules.
Since we are configuring the loadChildren method inside the router event handler, we are now provided with injectable services & other options which will provide more control over the module loading.

import { Component } from '@angular/core';
import { RouteConfigLoadStart, Router } from '@angular/router';
@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Conditionally lazy load modules';
  enableEdit = false;
 constructor(private router: Router) {
  this.router.events.subscribe((x) => {
    console.log(x);
    if (x instanceof RouteConfigLoadStart && x.route.path === 'viewedit') {
        x.route.loadChildren = () => {
          if (!this.enableEdit) {
            return import('./modules/view/view.module').then((mod) => mod.ViewModule);
   } else {
       return import('./modules/edit/edit.module').then((mod) => mod.EditModule);
    }
   };
  }
 });
}
. . . 
}

The complete working sample can be found in the below StackBlitz.

Feel free to contact me. Happy coding!!

How to publish Blazor WebAssembly application to GitHub pages using GitHub Action

Madhu Sudhanan P — Mon, 31 May 2021 15:38:10 +0000

In this post, I am going to show how to add a GitHub Action to your repository that would auto-publish your Blazor WebAssembly application to the GitHub page.

This post is going to be focused on creating GitHub Action and publishing the Blazor WebAssembly application. If you are not familiar with creating the Blazor application, you could go through it here.

Create GitHub Action workflow

The first step is to create GitHub Action for your Github repository in which your Blazor WebAssembly application resides. You can create the Github Action workflow in the Actions tab of the repository.

Now a YAML file will be created, name the file as per your wish.

In the YAML file, we are going to provide the below workflow steps to build and publish the WASM application to GitHub pages.

Set up

Now we are going to do the initial setup. In the initial setup, I am providing the name and setting an environment variable to use inside other workflow steps.

name: Deploy Blazor WASM to GitHub Page
env:
  PUBLISH_DIR: bin/Release/net5.0/publish/wwwroot

# Controls when the action will run
on:
  push:
    branches: [ master ]

name: Name of the GitHub action workflow
env -> PUBLISH_DIR: Denotes the folder in which our application will be published during publish command.
on – > push –> branches: Specifies that the workflow steps should be executed when pushed to the main branch.

Publish the application

The next workflow step is to publish the application. It can be done using the below code.

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2

    - name: Publish application
      run: dotnet publish -c Release

name: Name of the workflow step.
run: Runs any shell command. We are publishing our Blazor application in release mode here.

Rewrite the base element's href attribute

In the published application, the base element's href value is set to **. Since the GitHub page is published and served under our repository name, the repository name should be given as base element's href value. It can be done using a simple GitHub Action written by SteveSanderson.

    # base href url value should be changed so that resources like CSS and scripts can load properly. 
    - name: Rewrite base href
      if: success()
      uses: SteveSandersonMS/ghaction-rewrite-base-href@v1
      with:
        html_path: ${{ env.PUBLISH_DIR }}/index.html
        base_href: REPOSITORY_NAME

name: Name of the step.
if: Continue if only the above workflow steps passed.
uses: Use GitHub Action by SteveSanderson to rewrite the base URL. It will be called with two parameters.
- html_path: Path of the index.html file
- base_href: Replacement value for base href attribute.

Add .nojekyll file

With the base href value is re-written, we are all set to push the published folder to the GitHub page. But there is another stumble that needs to be addressed. GitHub pages don’t serve files from folders starting with an underscore(_).

So the files under the folder _framework and _content in our published folder will not served by the GitHub pages and the application will break. To resolve this problem we need to add the .nojekyll file to our folder using the below step.

    # add .nojekyll file to tell GitHub pages to not treat this as a Jekyll project. 
   # Allow files and folders starting with an underscore.
    - name: Add .nojekyll file
      run: touch ${{ env.PUBLISH_DIR }}/.nojekyll

Commit to GitHub page branch

Now push the published directory to the GitHub page branch using the below workflow step.

    - name: Commit to GitHub pages Repo
      if: success()
      uses: crazy-max/ghaction-github-pages@v1.5.1
      with:
        target_branch: gh-pages
        build_dir: ${{ env.PUBLISH_DIR }}
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

You can see that the target_branch parameter is set to gh-pages so we need to set the GitHub pages source branch as gh-pages in the Settings -> Pages section.

The full GitHub Action workflow steps are as follows.

In case, you want to do auto deploy your app then I suggest you to check out PublishSPAforGitHubPages.Build nuget package, which performs post publish process to deploy your application to GitHub pages.

Thanks for reading. Happy coding!!

NDepend – a cutting edge static code analysis tool

Madhu Sudhanan P — Sun, 30 May 2021 08:50:15 +0000

Writing code is fun and but writing maintainable code is a challenge and it is much needed for large-scale projects. Manually validating the code quality, maintaining performance and other factors are not feasible and will not help in the long term. This is one of the reasons, the developers are using static code analyzer tools when working with maintaining a large codebase.

I am going to discuss such a static analyzing tool which impressed me. And its many features make code maintainability a piece of cake.

NDepend, a static analysis tool for .NET developers. It is well designed, easy to use, and provides deep insight into your codebase to reduce future issues.

Download and Installation

You can download the NDepend from here. It provides a 14-days trial period with three setup variations to choose from.

Maintain code using Code rules and Quality gates

Quality gates feature helps the product owner or scrum master to daily report on the project status and give insight on the product releases. Many companies are now adopting an agile framework and continuous integration, which enables them to have a deliverable product for each commit and allows companies to have short-term releases. In such environments maintaining code standard is more difficult and manual checking will not help on a large scale and makes work tedious.

NDepend provides a vast set of code rules and quality gates which ensures that each commit abides necessary set of rules before committed in the main codebase.
The quality gate violation or code rule violations could be easily visualized in the interactive dashboard provided by NDepend. An example dashboard with quality gate failure is as follows.

The violations can be viewed in the Queries and Rules Explorer. The two Quality gates violations are shown in the below image.

Code review

Code review is an important phase in the software development lifecycle. It brings a collaboration of peer developers to review your code to make it better. The role of the NDepend static analyzer tool is inevitable since it reduces many manual works by ensuring various rules.

As a scrum master, I think the following queries of the NDepend must be followed during code review for a smooth and successful release.

Find and fix Quality gates violations.
Regression issues – Regression issues make the end-user frustrated and reduce trust against the product/service.
API breaking changes – Users don’t like frequent changes in APIs as it would bring rework and time-consuming.
Dead Code – Nowadays, apps should load and work at high speed, removing dead code would reduce the final product size.

There are many other queries available, these are my own minimal list of queries recommendations to be followed during code review.

Another impressive feature in NDepend is its in-built Diff viewer of the code against its baseline. This helps to view the code changes without leaving the visual studio during code review phase.

Architecture diagram

NDepend allows you to visualize application architecture and dependencies using Dependencies Graph and Dependencies Matrix diagrams.

This help us to understand the coupling between projects. The dependencies are represented by thousands of elements that helps to understand legacy code and its dependencies. I tried this architecture diagram on Blazor Clean Architecture which is as follows.

Reporting

NDepend also provides a customizable Report of the code base analysis in HTML format. The report will contain all analysis details of the code base such as quality gate violations, rules violations including architecture diagrams. The HTML page has an interactive UI that allows you to click and view violations within the report.

Also, the report contains a set of diagrams for our codebase. You can click the required diagram to view it on full screen. For architecture diagrams, I find it easier to use in the visual studio than the HTML report.

Summary

NDepend has a large set of features that help us in various scenarios. I just only covered some of the features I used till today.

If you are looking for a static analysis tool with advanced features and reporting system, then you should give NDepend a try. It is more than a static analysis tool, it’s a ”Swiss Army Knife” for .NET Developers.

Thanks for reading. Happy coding!!

References

https://www.ndepend.com/docs/getting-started-with-ndepend
https://github.com/blazorhero/CleanArchitecture

Blazor in depth — Create Blazor component without Lifecycle methods

Madhu Sudhanan P — Fri, 16 Oct 2020 17:20:16 +0000

It has been long time since I have managed to write a blog post. As I got up with a very challenging Blazor project in workplace, I got no time to share my thought with the community. Glad to be back!!.

In this blog post, I am going to share how I created a Blazor component without life-cycle methods and razor file syntax. We could also say this as class only component approach but without life-cycle methods. Many of them might knew this way of component rendering, but I felt like sharing this would help other folks who doesn’t know. I found this approach after going through various components used in Blazor source code.

To demonstrate this approach, we are going to create a simple Rating component.

I am creating a class named Rating.cs. As mentioned previously this is a class only component so I am not creating Razor component item.

public class Rating
{
}

First step in this approach is to implement Rating class with IComponent interface.

public class Rating : IComponent
{
}

Now the Rating class must implement below two methods of IComponent interface.

Attach — Attach the RenderHandle instance to the rating component.
SetParametersAsync — Set the component parameters. Yes I lied before, we need this life cycle method. But I promise, this is the only one needed I will not add no more.

In the Attach method, we need to get and store the RenderHandle instance for later usage. Now the code will look like below.

public class Rating : IComponent
{
     private RenderHandle _renderHandle;     

     void IComponent.Attach(RenderHandle renderHandle)
     {
        _renderHandle = renderHandle;
     }
}

Now we need to handle the SetParametersAsync method, this method should take care of below two important responsibilities.

Get component parameters from ParameterView and set in the corresponding component property. Here Rating component uses Value property.
Invoke Render method of the RenderHandle with the RenderFragment delegate.

Now the final rating component will look like below.

    public class Rating : IComponent
    {
        private RenderHandle _renderHandle;        

        [Parameter]
        public int Value { get; set; }        

        void IComponent.Attach(RenderHandle renderHandle)
        {
            _renderHandle = renderHandle;
        }

        Task IComponent.SetParametersAsync(ParameterView parameters)
        {
            foreach(var entry in parameters)
            {
                switch (entry.Name)
                {
                    case nameof(Value):
                        Value = (int)entry.Value;
                        break;
                }
            }
            _renderHandle.Render(RenderDelegate);                         
            return Task.CompletedTask;
        }        

        private void RenderDelegate(RenderTreeBuilder builder)
        {
            int max = Math.Min(Value, 5);
            int seq = 1;
            for (var i = 0; i < max; i++)
            {
                builder.OpenElement(seq++, "span");
                builder.AddAttribute(seq++, 
                          "style", "color:#f49813;font-size:30px");
                builder.AddContent(seq++, "★");
                builder.CloseElement();
            }
        }
    }

Now the Rating component can be used in our application simply like below.

The output looks like below.

Closing

I hope you have learned one of many ways of creating Blazor components. In this post, I am neither recommending this as a best approach nor insisting to use this approach for performance benefits. I found this approach as a simple and clean way of creating simple Blazor components.

Leave comments or share this post if you found this helpful. Happy coding !!