Skip to content

Commit a680994

Browse files
angularexampleangularexample
committed
Update README.md, cleanuo.
1 parent 02126be commit a680994

1 file changed

Lines changed: 52 additions & 51 deletions

File tree

‎README.md‎

Lines changed: 52 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ August 22, 2025
1212

1313
## Versions Used
1414

15-
At the time of this writing, it used the latest versions provided by Nx
15+
At the time of this writing, we used the latest versions provided by Nx
1616

1717
* Angular 20.1.0
1818
* React 19.0.0
@@ -42,19 +42,21 @@ JC may be available to work remotely and can be contacted at these links:
4242
* [Add the Nx Package for Angular](#add-the-nx-package-for-angular)
4343
* [Add the Nx Package for React](#add-the-nx-package-for-react)
4444
* [Generate the Angular Host App and Two Remotes](#generate-the-angular-host-app-and-two-remotes)
45+
* [Commit and Push the Changes for the Angular Host App](#commit-and-push-the-changes-for-the-angular-host-app)
46+
* [Build and Run the Host Application](#build-and-run-the-host-application)
4547
* [Browser View of the Host Application](#browser-view-of-the-host-application)
4648
* [Use the Menu to Access the Remote Applications](#use-the-menu-to-access-the-remote-applications)
4749
* [Generate the React Remote Application](#generate-the-react-remote-application)
4850
* [Build and Run the Remote Application](#build-and-run-the-remote-application)
4951
* [ReRun the Host Application](#rerun-the-host-application)
5052
* [Add the React Remote Application to the Host](#add-the-react-remote-application-to-the-host)
51-
* [Add the React Remote to the Host Manifest](#add-the-react-remote-to-the-host-manifest)
5253
* [Convert the React Remote to a Web Component](#convert-the-react-remote-to-a-web-component)
53-
* [Add Package @r2wc/react-to-web-component](#add-package-r2wcreact-to-web-component)
54-
* [Update the React Remote to Convert to a Web Component](#update-the-react-remote-to-convert-to-a-web-component)
54+
* [Add Package @r2wc/react-to-web-component](#add-package-r2wcreact-to-web-component)
55+
* [Update the React Remote to Convert to a Web Component](#update-the-react-remote-to-convert-to-a-web-component)
5556
* [In the Angular Host, Add a Wrapper Component](#in-the-angular-host-add-a-wrapper-component)
5657
* [Add the Wrapper Component and the React Remote Component to the Host Routes](#add-the-wrapper-component-and-the-react-remote-component-to-the-host-routes)
5758
* [Add Jsx to the Host TsConfig](#add-jsx-to-the-host-tsconfig)
59+
* [Add the React Remote to the Host Manifest](#add-the-react-remote-to-the-host-manifest)
5860
* [Add the React Remote URL to the Host HTML](#add-the-react-remote-url-to-the-host-html)
5961
* [ReRun the Host Application To Verify the React Remote Application](#rerun-the-host-application-to-verify-the-react-remote-application)
6062
* [Next Steps](#next-steps)
@@ -128,23 +130,23 @@ Commit and push the changes.
128130

129131
## Generate the Angular Host App and Two Remotes
130132

131-
Use the Nx Angular Generator command to create the Angular host app.
133+
Use the Nx Angular Generator in `@nx/angular` to create the Angular host app with this command:
134+
135+
```
136+
nx g @nx/angular:host apps/host --dynamic --remotes=remote1,remote2 --style=scss --e2eTestRunner=playwright --unitTestRunner=jest
137+
```
132138

133139
See the Nx documentation for more information on the [Angular Host App Generator Options](https://nx.dev/technologies/angular/api/generators/host#options)
134140

135-
Add the following command line options.
141+
We are using the following command line options.
136142

137143
* --dynamic
138144
* --remotes=remote1,remote2
139145
* --style=scss
140146
* --e2eTestRunner=playwright
141147
* --unitTestRunner=jest
142148

143-
```
144-
nx g @nx/angular:host apps/host --dynamic --remotes=remote1,remote2 --style=scss --e2eTestRunner=playwright --unitTestRunner=jest
145-
```
146-
147-
NOTE: The --remotes option is a comma-separated list of remote applications.
149+
**NOTE:** The --remotes option is a comma-separated list of remote applications.
148150
When using the Angular host generator, the remote applications will always be Angular applications.
149151

150152
### Commit and Push the Changes for the Angular Host App
@@ -168,7 +170,7 @@ Or you can use a command in the terminal window.
168170
nx run host:serve:development
169171
```
170172

171-
* **host** is the name of the host application.
173+
In this example, `host` is the name of the host application.
172174

173175
In the Run console output, it should include the browser address.
174176

@@ -189,22 +191,21 @@ It will have a menu in the upper left corner.
189191
In this case, if you have generated a host and two remotes,
190192
the menu will have three items:
191193

192-
193194
* Home
194195
* Remote1
195196
* Remote2
196197

197-
#### Use the Menu to Access the Remote Applications
198+
### Use the Menu to Access the Remote Applications
198199

199-
Try clicking on the **Remote1** or **Remote2** menu items.
200+
Try clicking on the `Remote1` or `Remote2` menu items.
200201

201202
You will see that each remote is accessed with routing.
202203

203204
The host application will be the root.
204205
Each remote will be a child of the host application.
205206

206207
The remote app name will be in the URL path.
207-
For example, the Remote1 application will be:
208+
For example, the `Remote1` application URL will be:
208209

209210
```
210211
http://localhost:4200/remote1
@@ -217,7 +218,7 @@ When you click on the `Remote2` menu item, you should see the remote application
217218
#### Verify the Remote View is Provided by MFE
218219

219220
To verify that the remote view is provided by MFE,
220-
open the browser Developer Tools and go to the **Network** tab.
221+
open the browser Developer Tools and go to the `Network` tab.
221222

222223
Refresh the browser.
223224

@@ -246,7 +247,7 @@ As noted earlier, the Angular host generator will always create Angular applicat
246247

247248
If you want to create a React remote application, you will need to use the Nx React Remote App Generator.
248249

249-
Generate the React remote application using the @nx/react package.
250+
Generate the React remote application using the `@nx/react` package with this command:
250251

251252
```
252253
nx g @nx/react:remote apps/remote3 --style=scss --e2eTestRunner=playwright --bundler=webpack
@@ -272,7 +273,6 @@ The Nx generator does not support mixing different frameworks in MFEs.
272273
You will need to configure the remote application to the host manually.
273274
We will provide detailed instructions later in this document.
274275

275-
276276
### Build and Run the Remote Application
277277

278278
Build and run the remote application and test it in the browser.
@@ -285,7 +285,7 @@ Or you can use a command in the terminal window.
285285
nx run remote3:serve:development
286286
```
287287

288-
* **Remote3** is the name of the React remote application.
288+
In this example, `*remote3` is the name of the React remote application.
289289

290290
Look in the Run console output for the browser address.
291291
In this case, it is:
@@ -314,39 +314,16 @@ You will need to configure the remote application to the host manually.
314314

315315
There are several steps to manually add the React remote application to the Angular host.
316316

317-
### Add the React Remote to the Host Manifest
318-
319-
Open the host manifest file.
320-
321-
`apps/host/public/module-federation.manifest.json`
322-
323-
BEFORE
324-
```json
325-
{
326-
"remote1": "http://localhost:4201/mf-manifest.json",
327-
"remote2": "http://localhost:4202/mf-manifest.json"
328-
}
329-
```
330-
331-
AFTER
332-
```json
333-
{
334-
"remote1": "http://localhost:4201/mf-manifest.json",
335-
"remote2": "http://localhost:4202/mf-manifest.json",
336-
"remote3": "http://localhost:4203/mf-manifest.json"
337-
}
338-
```
339-
340317
### Convert the React Remote to a Web Component
341318

342319
To use the React remote application in the Angular host,
343320
it must be converted to a Web Component.
344321

345-
We will use the **@r2wc/react-to-web-component** package to convert the React remote application to a Web Component.
322+
We will use the `@r2wc/react-to-web-component` package to convert the React remote application to a Web Component.
346323

347-
#### Add Package @r2wc/react-to-web-component
324+
### Add Package @r2wc/react-to-web-component
348325

349-
Add the package **@r2wc/react-to-web-component** to the Nx workspace.
326+
Add the package `@r2wc/react-to-web-component` to the Nx workspace.
350327

351328
```
352329
nx add @r2wc/react-to-web-component
@@ -356,7 +333,7 @@ This package will convert a React component to a Web Component.
356333

357334
It can only be used with React 18 or newer.
358335

359-
#### Update the React Remote to Convert to a Web Component
336+
### Update the React Remote to Convert to a Web Component
360337

361338
Open the React remote app component.
362339

@@ -399,7 +376,8 @@ We need an Angular component to wrap the React Web Component.
399376

400377
We will call this component `react-wrapper`.
401378

402-
In the Angular host app, create a new directory using the same name as the component, in the src/app directory, and create the component, using the Nx Angular component generator.
379+
In the Angular host app, create a new directory using the same name as the component,
380+
in the src/app directory, and create the component, using the Nx Angular component generator.
403381

404382
```
405383
nx g @nx/angular:component apps/host/src/app/react-wrapper/react-wrapper
@@ -460,9 +438,9 @@ export class ReactWrapper implements AfterContentInit {
460438

461439
This wrapper component will load the React Web Component into the view.
462440

463-
It gets the loader function, `loadchildren` from the route data.
441+
It gets the loader function, `load()` from the route data `loadChildren` property.
464442

465-
It gets the name of the Web Component from the route data.
443+
It gets the name of the Web Component from the route data `elementName` property.`
466444

467445
Then it creates a new element and inserts the React Web Component into it.
468446

@@ -507,6 +485,29 @@ Under the compilerOptions, add the following code to allow JSX.
507485
"jsx": "react-jsx",
508486
```
509487

488+
### Add the React Remote to the Host Manifest
489+
490+
Open the host manifest file.
491+
492+
`apps/host/public/module-federation.manifest.json`
493+
494+
BEFORE
495+
```json
496+
{
497+
"remote1": "http://localhost:4201/mf-manifest.json",
498+
"remote2": "http://localhost:4202/mf-manifest.json"
499+
}
500+
```
501+
502+
AFTER
503+
```json
504+
{
505+
"remote1": "http://localhost:4201/mf-manifest.json",
506+
"remote2": "http://localhost:4202/mf-manifest.json",
507+
"remote3": "http://localhost:4203/mf-manifest.json"
508+
}
509+
```
510+
510511
### Add the React Remote URL to the Host HTML
511512

512513
Open the host app.html file.
@@ -519,7 +520,7 @@ Add the following code to the host app.html file.
519520
<li><a routerLink="remote3">Remote3</a></li>
520521
```
521522

522-
### ReRun the Host Application To Verify the React Remote Application
523+
## ReRun the Host Application To Verify the React Remote Application
523524

524525
After clicking on the navigation link, you should see the React remote application in the Angular host application.
525526

0 commit comments

Comments
 (0)