Propagate route from shell to microfrontend

Author: xkons

projects/bookings/src/app/booking.module.ts

@@ -16,7 +16,7 @@ import { BookingComponent } from './booking.component';
     FormsModule,
     RouterModule.forRoot([
       {
-        path: 'journey/:journeyId',
+        path: 'bookings/journey/:journeyId',
         component: BookingFormComponent,
         data: { title: 'Book journey' },
       },

projects/bookings/src/micro-frontend/entry.component.ts

@@ -1,6 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   template: '<mf-booking></mf-booking>',
 })
-export class EntryComponent {}
+export class EntryComponent implements OnChanges {
+  @Input() route?: string;
+
+  constructor(private router: Router) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.route && this.route) {
+      this.router.navigateByUrl(this.route, { state: { fromPlatform: true } });
+    }
+  }
+}

projects/train-platform/src/micro-frontends/bookings-host.component.ts

@@ -2,6 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-bookings-host',
-  template: ` <mf-bookings-entry></mf-bookings-entry> `,
+  template: ` <mf-bookings-entry microFrontendRouting></mf-bookings-entry> `,
 })
 export class BookingsHostComponent {}

projects/train-platform/src/micro-frontends/bookings-host.module.ts

@@ -2,9 +2,10 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { BookingsHostComponent } from './bookings-host.component';
 import { LoadMicroFrontendGuard } from './load-micro-frontend.guard';
+import { MicroFrontendRoutingDirective } from './micro-frontend-routing.directive';
 
 @NgModule({
-  declarations: [BookingsHostComponent],
+  declarations: [BookingsHostComponent, MicroFrontendRoutingDirective],
   imports: [
     RouterModule.forChild([
       {

projects/train-platform/src/micro-frontends/micro-frontend-routing.directive.ts

@@ -0,0 +1,31 @@
+import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[microFrontendRouting]',
+})
+export class MicroFrontendRoutingDirective implements OnInit, OnDestroy {
+  private destroyed$ = new Subject<void>();
+
+  constructor(
+    private element: ElementRef,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
+
+  ngOnInit(): void {
+    this.route.url
+      .pipe(
+        map(() => this.router.url),
+        takeUntil(this.destroyed$)
+      )
+      .subscribe((url) => (this.element.nativeElement.route = url));
+  }
+
+  ngOnDestroy(): void {
+    this.destroyed$.next();
+  }
+}