docs(angular): fix mfe doc examples (#8168)
This commit is contained in:
parent
8a7d2de814
commit
373c7281e0
@ -133,6 +133,9 @@ new ModuleFederationPlugin({
|
|||||||
'@angular/router': { singleton: true, strictVersion: true },
|
'@angular/router': { singleton: true, strictVersion: true },
|
||||||
...sharedMappings.getDescriptors(),
|
...sharedMappings.getDescriptors(),
|
||||||
},
|
},
|
||||||
|
library: {
|
||||||
|
type: 'module',
|
||||||
|
},
|
||||||
}),
|
}),
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -150,7 +153,7 @@ We can see the following in Dashboard's webpack configuration:
|
|||||||
```js
|
```js
|
||||||
new ModuleFederationPlugin({
|
new ModuleFederationPlugin({
|
||||||
remotes: {
|
remotes: {
|
||||||
login: 'login@http://localhost:4201/remoteEntry.js',
|
login: 'http://localhost:4201/remoteEntry.js',
|
||||||
},
|
},
|
||||||
shared: {
|
shared: {
|
||||||
'@angular/core': { singleton: true, strictVersion: true },
|
'@angular/core': { singleton: true, strictVersion: true },
|
||||||
@ -159,6 +162,9 @@ new ModuleFederationPlugin({
|
|||||||
'@angular/router': { singleton: true, strictVersion: true },
|
'@angular/router': { singleton: true, strictVersion: true },
|
||||||
...sharedMappings.getDescriptors(),
|
...sharedMappings.getDescriptors(),
|
||||||
},
|
},
|
||||||
|
library: {
|
||||||
|
type: 'module',
|
||||||
|
},
|
||||||
}),
|
}),
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -166,10 +172,9 @@ The key difference to note with the Dashboard's configuration is the `remotes` o
|
|||||||
|
|
||||||
You give it a name that you can reference in your code, in this case `login`.
|
You give it a name that you can reference in your code, in this case `login`.
|
||||||
Then you assign it a string value of the following pattern:
|
Then you assign it a string value of the following pattern:
|
||||||
`{name}@{url}/{remoteEntrypointFilename}`
|
`{url}/{remoteEntrypointFilename}`
|
||||||
where:
|
where:
|
||||||
|
|
||||||
- `name` is the name given to the remote in the remote's webpack configuration
|
|
||||||
- `url` is the url where the remote application is hosted
|
- `url` is the url where the remote application is hosted
|
||||||
- `remoteEntrypointFilename` is the filename supplied in the remote's webpack configuration
|
- `remoteEntrypointFilename` is the filename supplied in the remote's webpack configuration
|
||||||
|
|
||||||
@ -352,9 +357,14 @@ To make this work, however, there are some initial steps we need to take. We nee
|
|||||||
Open up each and replace the `sharedMappings` config _(found near the top)_ with the following:
|
Open up each and replace the `sharedMappings` config _(found near the top)_ with the following:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
sharedMappings.register(path.join(__dirname, '../../tsconfig.base.json'), [
|
sharedMappings.register(
|
||||||
|
tsConfigPath,
|
||||||
|
[
|
||||||
|
/* mapped paths to share */
|
||||||
'@ng-mfe/shared/data-access-user',
|
'@ng-mfe/shared/data-access-user',
|
||||||
]);
|
],
|
||||||
|
workspaceRootPath
|
||||||
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
Now, let's delete the `app.component.html` and `app.component.css` files in the Dashboard app. They will not be needed for this tutorial.
|
Now, let's delete the `app.component.html` and `app.component.css` files in the Dashboard app. They will not be needed for this tutorial.
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user