Micro Frontend using Angular

WHY MICRO APP?
A whole angular application is bundled into a form that can simply be installed
and used anywhere else. It can even be used in a plain html page like below:

    <!DOCTYPE html>     <html>     <head>     <script src="https://cdn.jsdelivr.net/gh/Kavshree/micro-element-bundle/micro-header.js"></script>     </head>     <body> <micro-header></micro-header>     </body>     </html>

CREATING A MICRO APP

Let is start creating this app:

  1. Create an Angular app

Ng new micro-header


  1. app.module.ts

import { Injector, NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

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

import { createCustomElement } from '@angular/elements';

import { elementAt } from 'rxjs';


@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [],

  //bootstrap: [AppComponent],

  entryComponents: [AppComponent]

})

export class AppModule {

  constructor(private injector: Injector) {}

  ngDoBootstrap() {

    const element  = createCustomElement(AppComponent, {injector: this.injector});

    customElements.define('micro-header', element)

  }

 }


  1. Create a bundle file in the root directory. This will take everything from “dist” and concatenate them into a single file as “micro-header.js”

const fs = require('fs-extra');

const concat = require('concat');


(async function build() {

    const files = [

        'dist/micro-header/main.js',

        'dist/micro-header/polyfills.js',

        'dist/micro-header/runtime.js',

        'dist/micro-header/styles.js',

    ]

    await fs.ensureDir('dist/app');

    await concat(files, 'dist/app/micro-header.js')

})()


  1. By default we will have styles.css. But this cannot be packaged into a single .JS file since it is in .css format.

Solution is to convert this into .js by using module bundler package like “style-loader” and “css-loader” provided by Webpack

  • RUN: npm install --save-dev style-loader css-loader webpack

  • Create webpack.config.js file

const path = require('path');

module.exports = {

  entry: './src/styles.css',

  output: {

    path: path.resolve(__dirname, 'dist/micro-header'),

    filename: 'styles.js'

  },

  module: {

    rules: [

      {

        test: /\.css$/,

        use: ['style-loader', 'css-loader']

      }

    ]

  }

};

  • Update a new script in “package.json”

"bundle": "webpack --mode production && node ./bundle.js"


  1. Run : npm run bundle

  2. This now creates this in dist:

dist > app > micro-header.js

  1. Run “npm init” inside dist/app. This creates package.json file so that you can publish this as a library to npm

  2. Not: You could make this step automated with a small script

{

  "name": "micro-header-test1",

  "version": "1.0.0",

  "description": "",

  "main": "micro-header.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC"

}



  1. Login to npm and then run “npm publish”



CONSUMING THE MICRO APP IN ANOTHER APPLICATION


  1. Create an angular application: ng new consumer

  2. npm i micro-header-test1@1.0.0

  3. Include this in “scripts” of angular.json

  1. Update “schemas” in app.module.ts

schemas: [CUSTOM_ELEMENTS_SCHEMA]

  1. In app.component.html

<micro-header></micro-header>


Output:



Note: All the styles in the main styles.css file from the micro app will get leaked into the other main

consuming app. So its a good practice to instead use app.component.css as the “main” style for the app

Also, make sure to use ViewEncapsulation.ShadowDom to make sure its not leaked anywhere else


Comments

Post a Comment

Popular posts from this blog

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...
Read more

React & State Management: All Concepts

Section 1: Fundamentals 1. Counter with increment, decrement, reset — useState Remember: prev is needed when the new state depends on the old state. When you're setting a hardcoded value like 0, you just pass 0 directly. Why:  reason prev matters — if multiple state updates happen in the same render cycle, React batches them. Using prev guarantees you're working off the latest state, not a stale snapshot. 2. Toggle show/hide paragraph — useState Remember: onClick={toggle} — pass the function reference, not the call. onClick={() => toggle()} — also fine, arrow function that calls toggle when clicked. onClick={toggle()} — calls toggle immediately during render, setVisible triggers re-render, toggle calls again, infinite loop. Why: JSX evaluates expressions inside {} during render. toggle() is an expression that executes immediately. React doesn't get a chance to attach it as a handler — it just runs it right there, state updates, component re-renders, runs again. ...
Read more

React: Communication between components

Parent to Child: Props Child to Parent Callback Props (advanced props) Controlled Components useImperative hook  Nested Tree: useContext Sibling: Lift State Up PARENT TO CHILD: Props App.jsx Users.jsx <User name ={user} /> function User({ name }) {  return <h1> {name} </h1> } CHILD TO PARENT a) Callback Props (Advanced Props) Parent.jsx Child1.jsx export function Parent() {   function sayHello () {     alert(“hello triggered”)   }   <Child1 onSayHello ={ sayHello } /> } function Child1({ onSayHello }) {   return <button onClick={ onSayhello() }>          Click       </button> } b) Controlled Components Usually used in forms. Controlled components mean the parent owns the state, the child renders inputs, and every ch...
Read more