Part 3: Implementing Microfrontends in Angular

Continuing our series on microfrontends with Angular, we now venture into the practical aspects of implementation. This installment will guide you through creating a microfrontend using Angular, specifically utilizing Angular Elements for encapsulation and bootstrapping. We'll also explore strategies for hosting and dynamically loading microfrontends, along with integration techniques for a seamless user experience.

Creating a Microfrontend with Angular Elements

Angular Elements allows us to take components from Angular applications and package them as custom elements, a web standard for defining new HTML elements in a framework-agnostic way. This capability is particularly useful for microfrontends, as it enables the creation of standalone pieces that can be integrated into any web application, regardless of the framework it uses.

Step-by-Step Example

1. Setting Up Your Angular Project

Start by creating a new Angular project if you haven't already:

//bash code
ng new microfrontend-example --create-application=false
cd microfrontend-example
ng generate application microfrontend-app

This creates a new workspace and an application within that workspace. The --create-application=false flag tells the CLI not to create the initial application, allowing us to name our microfrontend-specific application explicitly.

2. Adding Angular Elements

Navigate to your application directory and install @angular/elements along with document-register-element, a polyfill for custom elements:

//bash code
cd projects/microfrontend-app
npm install @angular/elements document-register-element --save

3. Creating a Component

Generate a new component that will act as your microfrontend:

//bash code
ng generate component my-microfrontend

4. Modifying AppModule

Modify the AppModule to bootstrap your component as an Angular Element. Import createCustomElement from @angular/elements and Injector from @angular/core in your app.module.ts file:

//AppModule.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { MyMicrofrontendComponent } from './my-microfrontend/my-microfrontend.component';

@NgModule({
  declarations: [
    MyMicrofrontendComponent
  ],
  imports: [
    BrowserModule
  ],
  entryComponents: [MyMicrofrontendComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const el = createCustomElement(MyMicrofrontendComponent, { injector: this.injector });
    customElements.define('my-microfrontend', el);
  }
  ngDoBootstrap() {}
}

This code snippet turns MyMicrofrontendComponent into a custom element named <my-microfrontend>.

5. Building the Microfrontend

To build your microfrontend, you might need to adjust your build configuration to output a single bundle. You can use Angular CLI's custom webpack builders for this purpose.

Hosting and Integration Strategies

Once your microfrontend is packaged as a custom element, the next step is to host and dynamically load it into your container application.

Hosting Microfrontends

Microfrontends can be hosted independently, each on its own server or domain. This setup allows for separate deployment and versioning, enhancing the autonomy of each microfrontend.

Dynamic Loading

To dynamically load a microfrontend at runtime, the container application needs to retrieve and display the custom element. This can be achieved through various methods, such as:

Direct Script Loading: Use a <script> tag to load the microfrontend bundle. This method is straightforward but less dynamic.
Dynamic Imports: Utilize JavaScript's dynamic import() to load microfrontends on demand. This approach is more flexible and supports code splitting.

Integrating Microfrontends

Integration involves not just loading microfrontends but also ensuring they work together seamlessly. Key considerations include:

Navigation: Coordinate route changes between the container and microfrontends. Techniques like URL-based routing can help manage which microfrontend is displayed based on the browser's URL.
Communication: Establish a communication channel between microfrontends. Custom Events, Shared Libraries (like RxJS), or State Management Libraries can facilitate interaction, especially for shared state or cross-microfrontend events.

Conclusion

Implementing microfrontends in Angular, particularly through Angular Elements, offers a structured yet flexible approach to developing scalable and maintainable web applications. By encapsulating features as standalone components and employing strategic hosting and integration techniques, you can achieve a modular architecture that supports independent development and deployment. As we continue in this series, we'll dive deeper into advanced topics and explore real-world case studies to illustrate the power and potential of microfrontends.

Arbnora Kodja