Multi-app MicroFrontends in Angular

Github links:
shell-app
find-hotels
account-mgmt

Create 3 Angular apps as usual:

  • ng new hotel-reservation-system --routing --style=scss
  • ng new find-hotels --routing --style=scss
  • ng new account-management --routing --style=scss

Here hotel-reservation-system is the shell app that hosts find-hotels and account-management

Go inside each of the apps and run:

  • ng add @angular-architects/module-federation --project hotel-reservation-system
  • ng add @angular-architects/module-federation --project find-hotels
  • ng add @angular-architects/module-federation --project account-management

Select different default ports if needed. I am selecting

  • hotel-reservation-system: 4200
  • find-hotels: 63402
  • account-management: 63414
In each of the apps, navigate to:
<app>\webpack.config.js

update this:
const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
  name: 'hotel-reservation-system',
  filename: 'remoteEntry.js',
  remotes: {
    './Component': './src/app/app.component.ts',
  },
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
});

<app>\angular.json
"configurations": {
                        "production": {
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "500kB",
                                    "maximumError": "1MB"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "4kB",
                                    "maximumError": "8kB"
                                }
                            ],
                            "outputPath": "dist/hotel-reservation-system",
                            "builder": "@angular-devkit/build-angular:browser",
                            "moduleFederation": true,
                            "outputHashing": "all",
                            "extraWebpackConfig": "webpack.prod.config.js"
                        },
                        "development": {
                            "optimization": false,
                            "extractLicenses": false,
                            "sourceMap": true
                        }
                    },
                    "defaultConfiguration": "production"
                },

Notice the 3 properties added:
"outputPath": "dist/hotel-reservation-system",
"builder": "@angular-devkit/build-angular:browser",
"moduleFederation": true,


Same way for the other 2 apps:
"outputPath": "dist/find-hotels",
"builder": "@angular-devkit/build-angular:browser",
"moduleFederation": true,

"outputPath": "dist/account-management",
"builder": "@angular-devkit/build-angular:browser",
"moduleFederation": true,


Make sure remoteModule.js is loaded in all the 3 apps, in the browser load:
http://localhost:63414/remoteEntry.js
http://localhost:63402/remoteEntry.js
http://localhost:4200/remoteEntry.js
(or any other port number where your app is running)

We are all set for the apps to talk to each other. 
Run: ng s -o 
make sure all the apps run fine

Now, navigate to the routes of the "hotel-reservation-system" app. 
Lazy load the components of acount management and find hotels

hotel-reservation-system\src\app\app.routes.ts

import { loadRemoteModule } from '@angular-architects/module-federation';
import { Routes } from '@angular/router';

export const routes: Routes = [
    {
        path: 'find-hotels',
        loadComponent: () =>
          loadRemoteModule({
            type: 'module',
            remoteEntry: 'http://localhost:63402/remoteEntry.js',
            exposedModule: './Component'
          }).then(m => m.AppComponent)
    },
    {
        path: 'account-management',
        loadComponent: () =>
          loadRemoteModule({
            type: 'module',
            remoteEntry: 'http://localhost:63414/remoteEntry.js',
            exposedModule: './Component'
          }).then(m => m.AppComponent)
    },
];


And that's it!

Navigate to 
http://localhost:4200/find-hotels
http://localhost:4200/account-management













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