[英]Angular Module Federation with multiple repo not working
I've been able to create a monorepo project with several micro frontends without any issues, but I'm struggling to add a micro frontend from a different repo.我已经能够创建一个带有多个微前端的 monorepo 项目而没有任何问题,但是我正在努力从不同的 repo 添加一个微前端。
Shell: Shell:
webpack.config.js webpack.config.js
new ModuleFederationPlugin({
library: { type: "module" },
remotes: {
"mfe1": "mfe1@http://localhost:3000/remoteEntry.js", //mfe from same repo as shell
"mfe2": "mfe2@http://localhost:2000/remoteEntry.js", //mfe from same repo as shell
"mfe-repo": "mfe-repo@http://localhost:4200/remoteEntry.js", //mfe from different repo as shell
},
sidebar.component.html sidebar.component.html
<a class="" routerLink="/dandylion/dandylion-overview" routerLinkActive="linkactive" routerLinkActiveOptions="{ exact: false }">
<span>Dandylion</span>
</a>
<a class="home" routerLink="/snafu/snafu-overview" routerLinkActive="linkactive" routerLinkActiveOptions="{ exact: false }">
<span>Snafu</span>
</a>
<a routerLink="/mfe-repo" routerLinkActive="linkactive" routerLinkActiveOptions="{ exact: false }">
<span>MFE Repo</span>
</a>
app.routes.ts应用程序.routes.ts
{
path: 'dandylion',
loadChildren: () => loadRemoteModule({
type: 'module',
remoteEntry: 'http://localhost:3000/remoteEntry.js',
exposedModule: './Module'
})
.then(m => m.DandylionModule)
},
{
path: 'snafu',
loadChildren: () => loadRemoteModule({
type: 'module',
remoteEntry: 'http://localhost:2000/remoteEntry.js',
exposedModule: './Module'
})
.then(m => m.SnafuModule)
},
{
path: 'mfe-repo',
loadChildren: () => loadRemoteModule({
type: 'module',
remoteEntry: 'http://localhost:4200/remoteEntry.js',
exposedModule: './Module'
})
.then(m => m.AppModule)
},
MFE Repo: MFE 回购:
webpack.config.js webpack.config.js
module.exports = {
output: {
uniqueName: "mfe-repo",
publicPath: "http://localhost:4200/"
},
optimization: {
runtimeChunk: false
},
resolve: {
alias: {
...sharedMappings.getAliases(),
}
},
experiments: {
outputModule: true
},
plugins: [
new ModuleFederationPlugin({
library: { type: "module" },
name: "mfe-repo",
filename: "remoteEntry.js",
exposes: {
'./Module': './src/app/app.module.ts',
},
}),
],
};
app.routes.ts应用程序.routes.ts
import { Routes } from '@angular/router';
import { AppComponent } from './app.component';
export const APP_ROUTES: Routes = [
{ path: 'mfe-repo', component: AppComponent, pathMatch: 'full'},
];
app.module.ts app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { APP_ROUTES } from './app.routes';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(APP_ROUTES),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm stuck at this for the last 2 days, so if anyone can give a outside check, it would be greatly appreciated.在过去的 2 天里,我一直坚持这一点,所以如果有人可以进行外部检查,将不胜感激。 Thanks in advance!
提前致谢! Happy coding
快乐编码
We'll, as usual, the problem was a simple code change on the remote/mfe:我们将像往常一样,问题是远程/mfe 上的简单代码更改:
Instead of defining the RouterModule as 'forRoot', the correct way to set it was 'forChild'.与其将RouterModule 定义为'forRoot',设置它的正确方法是'forChild'。 As easy as that!
就这么简单!
MFE Repo: MFE 回购:
app.module.ts app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { APP_ROUTES } from './app.routes';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forChild(APP_ROUTES), // fix is here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
For me works like that: microfrontend1
: create new module not access app
module对我来说是这样的:
microfrontend1
: create new module not access app
module
webpack.config
-> from microfrontend1
module.exports -> exposes
webpack.config
-> 来自microfrontend1
module.exports -> exposes
'./Module': './projects/mfe1/src/app/flights/flights.module.ts'
mf.manifest.json
you should you have something like that mf.manifest.json
你应该有类似的东西
"frame":"http://localhost:4201/remoteEntry.js"
Shell routing you must have Shell 路由你必须有
{
path: 'frame',
loadChildren: () =>
loadRemoteModule({
remoteName: 'frame',
type:"manifest",
exposedModule: './Module',
})
.then((m) => m.FlightsModule), !=> m.AppModule
},
I how to help this answer.我如何帮助这个答案。 :-)
:-)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.