docs(angular): fix mfe doc examples (#8168)

This commit is contained in:
Colum Ferry 2021-12-15 09:28:38 +00:00 committed by GitHub
parent 8a7d2de814
commit 373c7281e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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(
'@ng-mfe/shared/data-access-user', tsConfigPath,
]); [
/* mapped paths to share */
'@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.