Skip to content

Commit da7180d

Browse files
manfredsteyermanfredsteyer
committed
docs: improve readme
1 parent e7eb403 commit da7180d

File tree

2 files changed

+159
-3
lines changed

2 files changed

+159
-3
lines changed

‎libs/native-federation/README.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,15 @@ We will at least provide a new version of this package per Angular major. If nec
2525
- Use version 17.x for Angular 17.x
2626
- Use version 17.1.x for Angular 17.1+
2727
- Use version 18.x for Angular 18+
28+
- Use version 18.1.x for Angular 18.1+
29+
30+
## Migration from Module Federation
31+
32+
If you currently use Angular with Module Federation, you can follow our Migration Guide to migrate to Native Federation and Angular's new fast esbuild-based build system.
2833

2934
## Updates
3035

31-
You can use ng update for updating Native Federation.
36+
You can use `ng update` for updating Native Federation.
3237

3338
Notes for [updating to version 18](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/native-federation/docs/update18.md)
3439

‎libs/native-federation/docs/migrate.md

Lines changed: 153 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,164 @@ Native Federation for Angular is a thin wrapper around the esbuild builder that
99
## Prerequisites
1010

1111
- Update your solution to the newest Angular and CLI version
12-
- Update your solution to the newest version of `@angular-architects/module-federation`
12+
- Update your solution to the newest version of `@angular-architects/module-federation` (!)
1313
- Have a look to our [FAQs about sharing packages with Native Federation](share-faq.md)
1414

1515
## Migration for Angular CLI projects
1616

17+
1. Remove Module Federation from your poject(s):
18+
19+
```
20+
ng g @angular-architects/module-federation:remove --project xyz
21+
```
22+
23+
2. Update your workspace to the new esbuild-based build system:
24+
25+
```
26+
ng update @angular/cli --name use-application-builder
27+
```
28+
29+
3. Initialize Native Federation for your projects:
30+
31+
```
32+
ng add @angular-architects/native-federation --project xyz --type remote --port 4201
33+
```
34+
35+
**Remarks:** Use type `remote` or type `dynamic-host`.
36+
37+
4. Adjust your `federation.config.js` generated for Native Federation. You can mostly copy over the settings from your `webpack.config.js` used for Module Federation before.
38+
39+
5. Update your EcmaScript imports in your source code. Make sure, you import from `@angular-architects/native-federation` instead of from `@angular-architects/module-federation`. Please also note that the signature of `loadRemoteModule` has been simplified:
40+
41+
```typescript
42+
// Before
43+
import { loadRemoteModule } from '@angular-architects/module-federation';
44+
45+
[...]
46+
47+
export const APP_ROUTES: Routes = [
48+
[...]
49+
{
50+
path: 'booking',
51+
loadChildren: () =>
52+
loadRemoteModule({
53+
type: 'module',
54+
remoteEntry: 'http://localhost:4201/remoteEntry.js',
55+
exposedModule: './routes'
56+
})
57+
.then(m => m.MFE1_ROUTES)
58+
},
59+
[...]
60+
];
61+
```
62+
63+
```typescript
64+
// After
65+
import { loadRemoteModule } from '@angular-architects/native-federation';
66+
67+
[...]
68+
69+
export const APP_ROUTES: Routes = [
70+
[...]
71+
{
72+
path: 'flights',
73+
loadComponent: () => loadRemoteModule('mfe1', './Component')
74+
.then((m) => m.AppComponent),
75+
},
76+
[...]
77+
];
78+
```
79+
80+
Please also note that loadRemoteModule now always points to a logical name that is resolved via the shell's federation manifest (`src/assets/federation.manifest.json` or `public/federation.manifest.json`):
81+
82+
```json
83+
{
84+
"mfe1": "http://localhost:4201/remoteEntry.json"
85+
}
86+
```
87+
88+
Please also note that the remoteEntry is now a `.json` file.
89+
90+
6. If everything works, delete your `webpack.config.js`
91+
92+
1793
## Migration for Nx projects
1894
95+
1. Remove Module Federation from your poject(s):
96+
97+
```
98+
nx g @angular-architects/module-federation:remove --project xyz
99+
```
100+
101+
2. Initialize Native Federation for your projects:
102+
103+
```
104+
npm i @angular-architects/native-federation
105+
106+
nx g @angular-architects/native-federation:init --project xyz --type remote --port 4201
107+
```
108+
109+
**Remarks:** Use type `remote` or type `dynamic-host`.
110+
111+
3. Adjust your federation.config.js generated for Native Federation. You can mostly copy over the settings from your `webpack.config.js` used for Module Federation before.
112+
113+
4. Update your EcmaScript imports in your source code. Make sure, you import from `@angular-architects/native-federation` instead of from `@angular-architects/module-federation`. Please also note that the signature of `loadRemoteModule` has been simplified:
114+
115+
```typescript
116+
// Before
117+
import { loadRemoteModule } from '@angular-architects/module-federation';
118+
119+
[...]
120+
121+
export const APP_ROUTES: Routes = [
122+
[...]
123+
{
124+
path: 'booking',
125+
loadChildren: () =>
126+
loadRemoteModule({
127+
type: 'module',
128+
remoteEntry: 'http://localhost:4201/remoteEntry.js',
129+
exposedModule: './routes'
130+
})
131+
.then(m => m.MFE1_ROUTES)
132+
},
133+
[...]
134+
];
135+
```
136+
137+
```typescript
138+
// After
139+
import { loadRemoteModule } from '@angular-architects/native-federation';
140+
141+
[...]
142+
143+
export const APP_ROUTES: Routes = [
144+
[...]
145+
{
146+
path: 'flights',
147+
loadComponent: () => loadRemoteModule('mfe1', './Component')
148+
.then((m) => m.AppComponent),
149+
},
150+
[...]
151+
];
152+
```
153+
154+
Please also note that loadRemoteModule now always points to a logical name that is resolved via the shell's federation manifest (`src/assets/federation.manifest.json` or `public/federation.manifest.json`):
155+
156+
```json
157+
{
158+
"mfe1": "http://localhost:4201/remoteEntry.json"
159+
}
160+
```
161+
162+
Please also note that the remoteEntry is now a `.json` file.
163+
164+
5. If everything works, delete your `webpack.config.js`
165+
166+
## Module Federation Toolkit
167+
168+
For Module Federation, we offered a simple toolkit helping with Multi Version/ Multi Framework scenarios. However, this toolkit was quite simple and can be implemented with just a few lines of code. To give you more flexibility, instead of providing a respective package for Native Federation, [here](https://www.angulararchitects.io/blog/micro-frontends-with-modern-angular-part-2-multi-version-and-multi-framework-solutions-with-angular-elements-and-web-components/) we describe how to implement such a functionality by yourself.
169+
19170
## Issues
20171
21-
We have tested this guide with several projects. However, e
172+
We have tested this guide with several projects. However, each project is different. If you run into issues, feel free to let us know.

0 commit comments

Comments
 (0)