@@ -41,12 +41,12 @@ $ npx @angular/cli@14 add @angular-architects/module-federation@14.3.14 --projec
41
41
42
42
3 . Add [ @angular/elements ] ( https://angular.io/guide/elements ) to create custom components.
43
43
``` shell
44
- $ npm i @angular/elements@12.2.17
44
+ $ npm i @angular/elements@14.3.0
45
45
```
46
46
47
47
4 . Add [ @angular-architects/module-federation-tools ] ( https://www.npmjs.com/package/@angular-architects/module-federation-tools ) to reduce boilerplate code.
48
48
``` shell
49
- $ npm i @angular-architects/module-federation-tools@12.5.3
49
+ $ npm i @angular-architects/module-federation-tools@14.3.14
50
50
```
51
51
52
52
5 . The plugin creates a Webpack configuration ` webpack.config.js ` which you need to adjust:
@@ -101,13 +101,13 @@ export class AppModule {
101
101
```
102
102
### Convert the existing app
103
103
104
- Add the plugin to the existing app in Angular 12 that acts as the shell.
104
+ 1 . The existing app in Angular 12 acts as the shell. Add the plugin to configure it .
105
105
``` shell
106
106
$ npx @angular/cli@12 add @angular-architects/module-federation@12.5.3 --project yourProject
107
107
```
108
108
NOTE: Replace ` yourProject ` with the name of your project.
109
109
110
- And adjust the resulting ` webpack.config.js ` as needed:
110
+ 2 . Adjust the resulting ` webpack.config.js ` as needed:
111
111
``` js
112
112
const ModuleFederationPlugin = require (' webpack/lib/container/ModuleFederationPlugin' );
113
113
@@ -125,6 +125,11 @@ module.exports = {
125
125
}
126
126
```
127
127
128
+ 3 . Add [ @angular-architects/module-federation-tools ] ( https://www.npmjs.com/package/@angular-architects/module-federation-tools ) :
129
+ ``` shell
130
+ $ npm i @angular-architects/module-federation-tools@12.5.2
131
+ ```
132
+
128
133
### Routing between the shell and the remote
129
134
130
135
Routing needs to be specifically handled between both apps.
0 commit comments