Angular Multi-repo Micro-Apps: Sharing Singleton services

With reference to the apps we already have set up,

Disclaimer: This is just to demonstrate a shared state. Not to be used in an ideal login/logout scenario. The best way to handle login/logouts are to use httpOnly cookies that use a token in BFF layer

Let's say we we want to handle user's authentication

create a folder, i am calling it "shared-library"

  • cd shared-library
  • ng new shared-library --create-application=false
  • ng generate library KavyaMyUserServiceLibrary
    • (cant use too generic names, it will not allow for public publish)

Inside
shared-library\shared-library\projects\user-service-library\src\lib\user-service-library.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserServiceLibraryService {

  constructor() { }
  private loggedIn = new BehaviorSubject<boolean>(false);
  loggedIn$ = this.loggedIn.asObservable();

  login(): void {
    console.log("from library logging in", this.isLoggedIn)
    this.loggedIn.next(true);
  }

  logout(): void {
    console.log("from library logging out", this.isLoggedIn)
    this.loggedIn.next(false);
  }

  get isLoggedIn(): boolean {
    console.log("from library loggedIn", this.loggedIn.getValue())
    return this.loggedIn.getValue();
  }
}

  • ng build KavyaMyUserServiceLibrary
  • npm login
  • cd dist/kavya-myuser-service-library
  • npm publish --access public

This is the library i published:

https://www.npmjs.com/package/kavya-myuser-service-library

Time to install the library.

You need to install in all the apps individually. 

BUT, in webpack.config.ts

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

module.exports = withModuleFederationPlugin({

  name: 'account-management',
  filename: 'remoteEntry.js',
  exposes: {
    './Component': './src/app/app.component.ts',
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
    'kavya-myuser-service-library': {
      singleton: true,
      strictVersion: false,
      requiredVersion: '^0.0.1'
    }
  },

});

Make sure singleton is marked as true.
Also, DO NOT provide inside component/module again in remote apps.

It needs to be provided ONLY ONCE in the shell app. 

shell:

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

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { UserServiceLibraryService } from 'kavya-myuser-service-library';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  providers: [UserServiceLibraryService],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'hotel-reservation-system';
  constructor(private userService: UserServiceLibraryService) {

  }

  ngOnInit() {
    this.userService.loggedIn$.subscribe(res => {
      console.log("from shell",this.userService.isLoggedIn, res)
    })
  }

  login() {
    this.userService.login()
  }
}

account-management\src\app\app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { UserServiceLibraryService } from 'kavya-myuser-service-library';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'account-management';
  constructor(private service: UserServiceLibraryService){}

  isLoggedIn?: boolean;

  ngOnInit() {
    this.service.loggedIn$.subscribe(res => {
      this.isLoggedIn = res;
      console.log("from account-mgmt",this.service.isLoggedIn, res)
    })
  }
}

Now, when we click 'login' that is on shell app, the new logged in state is also reflected in account management app!




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