我正在使用 Angular ModuleFederation Application 创建一个微前端应用程序。
我在 1 个微应用中有一个反应形式
<input type="text" [formControl]="email" />
<span class="text-danger" *ngIf="email.hasError('required')">This field is required</span>
所以,当我运行这个应用程序http://localhost:4201/setup
时,验证一切正常。
打包此应用程序后,
new ModuleFederationPlugin({
// For remotes (please adjust)
name: "businessSetup",
filename: "businessSetupRemoteEntry.js",
exposes: {
'./BusinessSetupModule': './projects/business-setup/src/app/components/setup/setup.module.ts',
},
shared: share({
"@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
...sharedMappings.getDescriptors()
})
}),
当我运行主机应用程序http://localhost:4200
时,会加载微应用程序,但验证时会出现奇怪的行为。它重复如下,我不知道。
托管应用程序 webpack
new ModuleFederationPlugin({
// For hosts (please adjust)
remotes: {
"businessSetup": "businessSetup@http://localhost:4201/businessSetupRemoteEntry.js",
},
shared: share({
"@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
...sharedMappings.getDescriptors()
})
}),
请问有什么线索吗?
更新:
这只是不适用于路由 url 更改
当网址为
http://localhost:4200
但不是当网址是
http://localhost:4200/test