Micro-Frontend Architecture Part 2: The Implementation with Angular and Web Components

Last week we have introduced you to micro-frontends and discussed the pros and cons that come with micro-frontend Architecture. As part 2 of the blog, we are going to implement components in a distributed manner and face the issues that can come up during the process.

The Implementation

WrapperApp

About the dependencies

About the code

1) First run: npm i @angular-extensions/elements

2) Then import { LazyElementsModule } from '@angular-extensions/elements' and add it to the imports of your AppModule

3) Then you add the schemas property to the @NgModule decorator of your AppModule and add the CUSTOM_ELEMENTS_SCHEMA

4) Lastly, with *axLazyElement directive you can load the element you need and enter the URL of the element bundle

        import { BrowserModule } from '@angular/platform-browser';
        import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
        import { LazyElementsModule } from '@angular-extensions/elements';

        import { AppComponent } from './app.component';
        import { CoverComponent } from './cover/cover.component';

        @NgModule({
            declarations: [
                AppComponent,
                CoverComponent
            ],
            imports: [
                BrowserModule,
                LazyElementsModule,
            ],
            providers: [],
            bootstrap: [AppComponent],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
        })
        export class AppModule { }
    

        @Component({
            selector: 'app-cover',
            template: `
                
Shows the webcomponent below
                
            `
        })
        export class CoverComponent {
            handleEvent(event: any): void {
                console.log(`His name is ${event.detail.name}`);
            }
        }
    

WidgetApp

About the dependencies

1) @angular/elements - It’s an angular library that contains the methods for converting a component into a web component, add it with ng add @angular/elements

2) serve - Used to serve the javascript file in your dist folder. Add it with npm i serve --save-dev as a dev dependency

3) @webcomponents/webcomponentsjs (optional) - A polyfill, will not be vital unless your target in tsconfig.ts is ES2015.

4) ngx-build-plus - It extends the Angular CLI's default build behaviour. It provides the functionality to build the whole project into one .js file, which is needed to implement a web component. Install it via npm i ngx-build-plus --save-dev

About the code

        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule, Injector } from '@angular/core';
        import { createCustomElement } from '@angular/elements';

        import { AppComponent } from './app.component';
        import { WidgetComponent} from './widget-component/widget-component.component';

        @NgModule({
            declarations: [
                AppComponent,
                WidgetComponent
            ],
            imports: [
                BrowserModule
            ],
            providers: [],
            entryComponents: [
                AppComponent,
                WidgetComponent
            ]
        })
        export class AppModule {
            constructor(private injector: Injector) { }

            ngDoBootstrap(): void {
                const ngCustomElement = createCustomElement(WidgetComponent, { injector: this.injector });
                customElements.define('widget-component', ngCustomElement);
            }
        }
    

        import { Component, EventEmitter, Input, Output } from '@angular/core';

        @Component({
            // tslint:disable-next-line:component-selector
            selector: 'widget-component',
            template: `
                
Hello {{ name }}
                Create Event
            `,
            styleUrls: ['./widget.component.css']
        })
        export class WidgetComponent {
            @Input() name: string;
            @Output() hello = new EventEmitter();
        }
    

        {
            ...
            "architect": {
                ...
                "build": {
                    "builder": "ngx-build-plus:build", ...
                },
                ...
                "serve": {
                    "builder": "ngx-build-plus:dev-server", ...
                },
                "test": {
                    "builder": "ngx-build-plus:karma", ...
                },
                ...
            },   
            ...
        }
    

        {
            "start": "npm run build && serve -l 5001 dist/widget-app",
            "build": "ng build --prod --output-hashing none --single-bundle true",
        }
    

Conclusion

No comments

Leave a reply