diff --git a/projects/train-platform/src/assets/i18n/de.json b/projects/train-platform/src/assets/i18n/de.json
index b5dead7..fc37c70 100644
--- a/projects/train-platform/src/assets/i18n/de.json
+++ b/projects/train-platform/src/assets/i18n/de.json
@@ -1,6 +1,7 @@
{
"navbar": {
"home": "Start",
+ "myBookings": "Meine Buchungen",
"language": {
"text": "Sprache",
"en": "Englisch",
@@ -12,14 +13,6 @@
"dark": "Dunkel"
}
},
- "booking": {
- "title": "Reise {{ id }} buchen",
- "reserveSeatQuestion": "Möchten Sie einen Sitzplatz reservieren?",
- "firstClassQuestion": "Möchten Sie in der ersten Klasse sitzen?",
- "bookAction": "Buchen",
- "confirmation": "Reise gebucht!",
- "error": "Reise konnte nicht gebucht werden!"
- },
"journey": {
"bookAction": "Buchen"
}
diff --git a/projects/train-platform/src/assets/i18n/en.json b/projects/train-platform/src/assets/i18n/en.json
index bccc253..0c02747 100644
--- a/projects/train-platform/src/assets/i18n/en.json
+++ b/projects/train-platform/src/assets/i18n/en.json
@@ -1,6 +1,7 @@
{
"navbar": {
"home": "Home",
+ "myBookings": "My Bookings",
"language": {
"text": "Language",
"en": "English",
@@ -12,14 +13,6 @@
"dark": "Dark"
}
},
- "booking": {
- "title": "Book journey {{ id }}",
- "reserveSeatQuestion": "Do you want to reserve a seat?",
- "firstClassQuestion": "Do you want to sit in first class?",
- "bookAction": "Book",
- "confirmation": "Booked a journey!",
- "error": "Journey could not be booked!"
- },
"journey": {
"bookAction": "Book"
}
diff --git a/projects/train-platform/src/booking/booking.module.ts b/projects/train-platform/src/booking/booking.module.ts
deleted file mode 100644
index 35cc27c..0000000
--- a/projects/train-platform/src/booking/booking.module.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import { HotToastModule } from '@ngneat/hot-toast';
-import { TranslateModule } from '@ngx-translate/core';
-import { BookingFormComponent } from './booking-form/booking-form.component';
-
-@NgModule({
- declarations: [BookingFormComponent],
- imports: [
- CommonModule,
- FormsModule,
- RouterModule.forChild([
- {
- path: 'journey/:journeyId',
- component: BookingFormComponent,
- data: { title: 'Book journey' },
- },
- ]),
- HotToastModule.forRoot(),
- TranslateModule.forChild(),
- ],
-})
-export class BookingModule {}
diff --git a/projects/train-platform/src/booking/booking.service.ts b/projects/train-platform/src/booking/booking.service.ts
deleted file mode 100644
index f4b100f..0000000
--- a/projects/train-platform/src/booking/booking.service.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
-
-@Injectable({
- providedIn: 'root',
-})
-export class BookingService {
- book(
- _journeyId: string,
- _options: { reserveSeat: boolean; firstClass: boolean }
- ): Observable {
- return of(null as unknown as void);
- }
-}
diff --git a/projects/train-platform/src/micro-frontends/bookings-host.component.ts b/projects/train-platform/src/micro-frontends/bookings-host.component.ts
new file mode 100644
index 0000000..5bcef85
--- /dev/null
+++ b/projects/train-platform/src/micro-frontends/bookings-host.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-bookings-host',
+ template: `
+
+ `,
+})
+export class BookingsHostComponent {}
diff --git a/projects/train-platform/src/micro-frontends/bookings-host.module.ts b/projects/train-platform/src/micro-frontends/bookings-host.module.ts
new file mode 100644
index 0000000..c45780c
--- /dev/null
+++ b/projects/train-platform/src/micro-frontends/bookings-host.module.ts
@@ -0,0 +1,34 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { environment } from '../environments/environment';
+import { BookingsHostComponent } from './bookings-host.component';
+import { LoadMicroFrontendGuard } from './load-micro-frontend.guard';
+import { MicroFrontendLanguageDirective } from './micro-frontend-language.directive';
+import { MicroFrontendRoutingDirective } from './micro-frontend-routing.directive';
+
+const getMicrofrontendBundleUrl = (frontendName: 'bookings') =>
+ `/frontends/${frontendName}/main.js`;
+
+@NgModule({
+ declarations: [
+ BookingsHostComponent,
+ MicroFrontendRoutingDirective,
+ MicroFrontendLanguageDirective,
+ ],
+ imports: [
+ RouterModule.forChild([
+ {
+ path: '**',
+ canActivate: [LoadMicroFrontendGuard],
+ component: BookingsHostComponent,
+ data: {
+ bundleUrl: environment.production
+ ? getMicrofrontendBundleUrl('bookings')
+ : 'http://localhost:4201/main.js',
+ },
+ },
+ ]),
+ ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class BookingsHostModule {}
diff --git a/projects/train-platform/src/micro-frontends/load-micro-frontend.guard.ts b/projects/train-platform/src/micro-frontends/load-micro-frontend.guard.ts
new file mode 100644
index 0000000..1a4080b
--- /dev/null
+++ b/projects/train-platform/src/micro-frontends/load-micro-frontend.guard.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate } from '@angular/router';
+import { MicroFrontendRegistryService } from './micro-frontend-registry.service';
+
+@Injectable({ providedIn: 'root' })
+export class LoadMicroFrontendGuard implements CanActivate {
+ constructor(
+ private microFrontendRegistryService: MicroFrontendRegistryService
+ ) {}
+
+ canActivate(route: ActivatedRouteSnapshot): Promise {
+ const bundleUrl = route.data.bundleUrl as unknown;
+ if (!(typeof bundleUrl === 'string')) {
+ console.error(`
+ The LoadMicroFrontendGuard is missing information on which bundle to load.
+ Did you forget to provide a bundleUrl: string as data to the route?
+ `);
+ return Promise.resolve(false);
+ }
+ return this.microFrontendRegistryService.loadBundle(bundleUrl);
+ }
+}
diff --git a/projects/train-platform/src/micro-frontends/micro-frontend-language.directive.ts b/projects/train-platform/src/micro-frontends/micro-frontend-language.directive.ts
new file mode 100644
index 0000000..b75df96
--- /dev/null
+++ b/projects/train-platform/src/micro-frontends/micro-frontend-language.directive.ts
@@ -0,0 +1,35 @@
+import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { Subject } from 'rxjs';
+import { map, startWith, takeUntil } from 'rxjs/operators';
+
+@Directive({
+ // eslint-disable-next-line @angular-eslint/directive-selector
+ selector: '[microFrontendLanguage]',
+})
+export class MicroFrontendLanguageDirective implements OnInit, OnDestroy {
+ private destroyed$ = new Subject();
+
+ constructor(
+ private element: ElementRef,
+ private translateService: TranslateService
+ ) {}
+
+ ngOnInit(): void {
+ this.translateService.onLangChange
+ .pipe(
+ map((event) => event.lang),
+ startWith(
+ this.translateService.currentLang ?? this.translateService.defaultLang
+ ),
+ takeUntil(this.destroyed$)
+ )
+ .subscribe((language) => {
+ this.element.nativeElement.language = language;
+ });
+ }
+
+ ngOnDestroy(): void {
+ this.destroyed$.next();
+ }
+}
diff --git a/projects/train-platform/src/micro-frontends/micro-frontend-registry.service.ts b/projects/train-platform/src/micro-frontends/micro-frontend-registry.service.ts
new file mode 100644
index 0000000..a218f5b
--- /dev/null
+++ b/projects/train-platform/src/micro-frontends/micro-frontend-registry.service.ts
@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+
+function load(url: string): Promise {
+ return new Promise((resolve, reject) => {
+ const script = document.createElement('script');
+ script.src = url;
+ script.onload = () => resolve();
+ script.onerror = () =>
+ reject({
+ error: `Bundle ${url} could not be loaded`,
+ });
+ document.body.appendChild(script);
+ });
+}
+
+/**
+ * The loading state of a bundle.
+ *
+ * UNKNOWN -> It has not been tried to load this bundle.
+ * LOADING -> The loading of this bundle is currently happening.
+ * LOADED -> The bundle has been successfully loaded.
+ * FAILED -> The loading of the bundle failed.
+ */
+type LoadingState = 'UNKNOWN' | 'LOADING' | 'LOADED' | 'FAILED';
+
+/**
+ * This service loads bundles and keeps track of which bundles have been already loaded.
+ * This way, it prevents errors that would occur if a bundle is loaded a second time.
+ */
+@Injectable({ providedIn: 'root' })
+export class MicroFrontendRegistryService {
+ private loadingStates: Record = {};
+
+ /**
+ * Loads the given bundle if not already loaded, registering its custom elements in the browser.
+ *
+ * @param bundleUrl The url of the bundle, can be absolute or relative to the domain + base href.
+ */
+ async loadBundle(bundleUrl: string): Promise {
+ if (['LOADING', 'LOADED'].includes(this.getLoadingState(bundleUrl))) {
+ return true;
+ }
+ this.loadingStates[bundleUrl] = 'LOADING';
+ const isSuccess = await load(bundleUrl)
+ .then(() => true)
+ .catch(() => false);
+ this.loadingStates[bundleUrl] = isSuccess ? 'LOADED' : 'FAILED';
+ return isSuccess;
+ }
+
+ /**
+ * Returns the loading state of the bundle.
+ *
+ * @param bundleUrl The url of the bundle.
+ */
+ getLoadingState(bundleUrl: string): LoadingState {
+ return this.loadingStates[bundleUrl] || 'UNKNOWN';
+ }
+
+ /**
+ * Returns if the bundle has already been loaded successfully.
+ *
+ * @param bundleUrl The url of the bundle.
+ */
+ isBundleLoaded(bundleUrl: string): boolean {
+ return this.getLoadingState(bundleUrl) === 'LOADED';
+ }
+}
diff --git a/projects/train-platform/src/micro-frontends/micro-frontend-routing.directive.ts b/projects/train-platform/src/micro-frontends/micro-frontend-routing.directive.ts
new file mode 100644
index 0000000..c219e02
--- /dev/null
+++ b/projects/train-platform/src/micro-frontends/micro-frontend-routing.directive.ts
@@ -0,0 +1,60 @@
+import {
+ Directive,
+ ElementRef,
+ HostListener,
+ OnDestroy,
+ OnInit,
+} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
+
+export interface RouterEvent {
+ url: string;
+ replaceUrl: boolean;
+}
+
+@Directive({
+ // eslint-disable-next-line @angular-eslint/directive-selector
+ selector: '[microFrontendRouting]',
+})
+export class MicroFrontendRoutingDirective implements OnInit, OnDestroy {
+ private destroyed$ = new Subject();
+
+ constructor(
+ private element: ElementRef,
+ private router: Router,
+ private route: ActivatedRoute
+ ) {}
+
+ @HostListener('routeChange', ['$event'])
+ handleRouteChange(event: { detail?: RouterEvent }) {
+ this.navigateToUrl(event.detail);
+ }
+
+ navigateToUrl(event: RouterEvent | undefined): void {
+ if (event?.url && event.url.startsWith('/')) {
+ this.router.navigateByUrl(event.url, {
+ replaceUrl: event.replaceUrl || false,
+ });
+ } else {
+ console.warn(
+ `The microFrontendRouting directive received an invalid router event.`,
+ event
+ );
+ }
+ }
+
+ 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();
+ }
+}
diff --git a/proxy.conf.json b/proxy.conf.json
new file mode 100644
index 0000000..935993f
--- /dev/null
+++ b/proxy.conf.json
@@ -0,0 +1,10 @@
+{
+ "/frontends/bookings/*": {
+ "target": "http://localhost:4201",
+ "secure": false,
+ "logLevel": "info",
+ "pathRewrite": {
+ "^/frontends/bookings/": "/"
+ }
+ }
+}
\ No newline at end of file