Skip to content

Commit 6d6d630

Browse files
authored
fix: target right package version for Micro Frontends (#126)
1 parent a5d6486 commit 6d6d630

File tree

1 file changed

+9
-4
lines changed
  • content/posts/2024/05/15/maintaining-legacy-code-with-micro-frontends

1 file changed

+9
-4
lines changed

content/posts/2024/05/15/maintaining-legacy-code-with-micro-frontends/post.md

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,12 @@ $ npx @angular/cli@14 add @angular-architects/module-federation@14.3.14 --projec
4141

4242
3. Add [@angular/elements](https://angular.io/guide/elements) to create custom components.
4343
```shell
44-
$ npm i @angular/elements@12.2.17
44+
$ npm i @angular/elements@14.3.0
4545
```
4646

4747
4. Add [@angular-architects/module-federation-tools](https://www.npmjs.com/package/@angular-architects/module-federation-tools) to reduce boilerplate code.
4848
```shell
49-
$ npm i @angular-architects/module-federation-tools@12.5.3
49+
$ npm i @angular-architects/module-federation-tools@14.3.14
5050
```
5151

5252
5. The plugin creates a Webpack configuration `webpack.config.js` which you need to adjust:
@@ -101,13 +101,13 @@ export class AppModule {
101101
```
102102
### Convert the existing app
103103

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.
105105
```shell
106106
$ npx @angular/cli@12 add @angular-architects/module-federation@12.5.3 --project yourProject
107107
```
108108
NOTE: Replace `yourProject` with the name of your project.
109109

110-
And adjust the resulting `webpack.config.js` as needed:
110+
2. Adjust the resulting `webpack.config.js` as needed:
111111
```js
112112
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
113113

@@ -125,6 +125,11 @@ module.exports = {
125125
}
126126
```
127127

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+
128133
### Routing between the shell and the remote
129134

130135
Routing needs to be specifically handled between both apps.

0 commit comments

Comments
 (0)