Skip to content

Commit be98f88

Browse files
author
Alain BOUDARD
committed
fix: add manifest load with api endpoint
1 parent 2035a7f commit be98f88

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+204
-28
lines changed

‎application/ng-shell/src/app/app-routing.module.ts

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
import { NgModule } from '@angular/core';
22
import { RouterModule, Routes } from '@angular/router';
33

4-
const routes: Routes = [
4+
export const APP_ROUTES: Routes = [
55
{
66
path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule)
7-
},
8-
{
9-
path: 'orders',
10-
loadChildren: () => import('ng-mfe1/Module').then(m => m.OrdersModule)
117
}
128
];
139

1410
@NgModule({
15-
imports: [RouterModule.forRoot(routes, { useHash: true })],
11+
imports: [RouterModule.forRoot(APP_ROUTES, { useHash: true })],
1612
exports: [RouterModule]
1713
})
1814
export class AppRoutingModule { }

‎application/ng-shell/src/app/app.component.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ <h1>{{title}}</h1>
22
<ul>
33
<li>Home</li>
44
<li><a routerLink="users">Users</a></li>
5-
<li><a routerLink="orders">Mfe 1</a></li>
5+
<li *ngFor="let remote of remotes">
6+
<a [routerLink]="remote.routePath">{{remote.displayName}}</a>
7+
</li>
68
</ul>
79
<router-outlet></router-outlet>

‎application/ng-shell/src/app/app.component.ts

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,28 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
2+
import { Router } from '@angular/router';
3+
import { CustomManifest, CustomRemoteConfig } from './utils/config';
4+
import { getManifest, loadManifest } from '@angular-architects/module-federation';
5+
import { buildRoutes } from './utils/routes';
26

37
@Component({
48
selector: 'app-root',
59
templateUrl: './app.component.html',
610
styleUrls: ['./app.component.scss']
711
})
8-
export class AppComponent {
12+
export class AppComponent implements OnInit {
913
title = 'ng-shell';
14+
remotes: CustomRemoteConfig[] = [];
15+
16+
constructor(
17+
private router: Router) {
18+
}
19+
20+
async ngOnInit() {
21+
await loadManifest("http://localhost:8080/ng-shell/api/manifest")
22+
const httpManifest = getManifest<CustomManifest>();
23+
const routes = buildRoutes(httpManifest);
24+
this.router.resetConfig(routes);
25+
this.remotes = Object.values(httpManifest);
26+
}
27+
1028
}

‎application/ng-shell/src/app/decl.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
// decl.d.ts
2-
declare module 'ng-mfe1/Module';
2+
declare module 'mfe1/Module';

‎application/ng-shell/src/app/utils/config.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Manifest, RemoteConfig } from "@angular-architects/module-federation";
2+
3+
export type CustomRemoteConfig = RemoteConfig & {
4+
exposedModule: string;
5+
displayName: string;
6+
routePath: string;
7+
ngModuleName: string;
8+
};
9+
10+
export type CustomManifest = Manifest<CustomRemoteConfig>;

‎application/ng-shell/src/app/utils/routes.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Routes } from "@angular/router";
2+
import { CustomManifest } from "./config";
3+
import { loadRemoteModule } from "@angular-architects/module-federation";
4+
import { APP_ROUTES } from "../app-routing.module";
5+
6+
export function buildRoutes(options: CustomManifest): Routes {
7+
8+
const lazyRoutes: Routes = Object.keys(options).map(key => {
9+
const entry = options[key];
10+
return {
11+
path: entry.routePath,
12+
loadChildren: () =>
13+
loadRemoteModule({
14+
type: 'manifest',
15+
remoteName: key,
16+
exposedModule: entry.exposedModule
17+
})
18+
.then(m => m[entry.ngModuleName])
19+
}
20+
});
21+
22+
return [...APP_ROUTES, ...lazyRoutes];
23+
}

‎application/ng-shell/src/assets/mf.manifest.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"mfe1": {
3+
"remoteEntry": "http://localhost:8080/ng-shell/mfe1/remoteEntry.js",
4+
5+
"exposedModule": "./Module",
6+
"displayName": "Orders",
7+
"routePath": "orders",
8+
"ngModuleName": "OrdersModule"
9+
}
10+
}

‎application/ng-shell/src/main.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
1+
// import { loadManifest } from '@angular-architects/module-federation';
2+
3+
/*loadManifest("/ng-shell/assets/mf.manifest.json")
4+
.catch(err => console.error(err))
5+
.then(_ => import('./bootstrap'))
6+
.catch(err => console.error(err));*/
7+
18
import('./bootstrap')
2-
.catch(err => console.error(err));
9+
.catch(err => console.error(err));

‎application/ng-shell/webpack.config.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@ const { shareAll, withModuleFederationPlugin } = require('@angular-architects/mo
22

33
module.exports = withModuleFederationPlugin({
44

5-
remotes: {
6-
"ng-mfe1": "http://localhost:8080/ng-shell/mfe1/remoteEntry.js",
7-
},
8-
95
shared: {
106
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
117
},

‎application/src/main/java/com/cit/application/controllers/HelloController.java

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,119 @@
11
package com.cit.application.controllers;
22

3+
import org.springframework.beans.factory.annotation.Value;
34
import org.springframework.web.bind.annotation.GetMapping;
45
import org.springframework.web.bind.annotation.RestController;
56

7+
8+
69
@RestController
710
public class HelloController {
811

12+
@Value("${mf.manifest.remoteEntry}")
13+
private String remoteEntry;
14+
15+
@Value("${mf.manifest.exposedModule}")
16+
private String exposedModule;
17+
18+
@Value("${mf.manifest.displayName}")
19+
private String displayName;
20+
21+
@Value("${mf.manifest.routePath}")
22+
private String routePath;
23+
24+
@Value("${mf.manifest.ngModuleName}")
25+
private String ngModuleName;
26+
27+
@Value("${mf.manifest.type}")
28+
private String type;
29+
930
@GetMapping("/api/hello")
1031
public String index() {
1132
return "Greetings from Spring Boot!";
1233
}
1334

35+
@GetMapping("/api/manifest")
36+
public MicroFrontend microfontend() {
37+
Manifest mfe1 = new Manifest(remoteEntry, exposedModule, displayName, routePath, ngModuleName, type);
38+
return new MicroFrontend(mfe1);
39+
}
40+
41+
public static class MicroFrontend {
42+
private Manifest mfe1;
43+
44+
public MicroFrontend(Manifest mfe1) {
45+
this.mfe1 = mfe1;
46+
}
47+
48+
public Manifest getMfe1() {
49+
return mfe1;
50+
}
51+
public void setMfe1(Manifest mfe1) {
52+
this.mfe1 = mfe1;
53+
}
54+
}
55+
56+
public static class Manifest {
57+
58+
private String remoteEntry;
59+
private String exposedModule;
60+
private String displayName;
61+
private String routePath;
62+
private String ngModuleName;
63+
private String type;
64+
65+
public Manifest(
66+
String remoteEntry,
67+
String exposedModule,
68+
String displayName,
69+
String routePath,
70+
String ngModuleName,
71+
String type) {
72+
this.remoteEntry = remoteEntry;
73+
this.exposedModule = exposedModule;
74+
this.displayName = displayName;
75+
this.routePath = routePath;
76+
this.ngModuleName = ngModuleName;
77+
this.type = type;
78+
}
79+
80+
public String getRemoteEntry() {
81+
return remoteEntry;
82+
}
83+
public void setRemoteEntry(String remoteEntry) {
84+
this.remoteEntry = remoteEntry;
85+
}
86+
public String getExposedModule() {
87+
return exposedModule;
88+
}
89+
public void setExposedModule(String exposedModule) {
90+
this.exposedModule = exposedModule;
91+
}
92+
public String getDisplayName() {
93+
return displayName;
94+
}
95+
public void setDisplayName(String displayName) {
96+
this.displayName = displayName;
97+
}
98+
public String getRoutePath() {
99+
return routePath;
100+
}
101+
public void setRoutePath(String routePath) {
102+
this.routePath = routePath;
103+
}
104+
public String getNgModuleName() {
105+
return ngModuleName;
106+
}
107+
public void setNgModuleName(String ngModuleName) {
108+
this.ngModuleName = ngModuleName;
109+
}
110+
public String getType() {
111+
return type;
112+
}
113+
public void setType(String type) {
114+
this.type = type;
115+
}
116+
117+
}
118+
14119
}

0 commit comments

Comments
 (0)