Angularmat-select和webpack模块联合事件问题
Angular mat-select and webpack module federation event problem
我在 MonoRepo 中有两个 Angular 应用程序,一个 shell 应用程序和一个内容应用程序。
shell 应用程序就像一个显示卡片的登录页面,单击它会显示内容应用程序。
在此内容应用程序中,我使用的是 mat-select 控件,它不会在外部单击时关闭面板 -> 问题!
shell 应用程序似乎捕获了外部点击事件。
如果我在 shell 应用程序中使用 mat-select,一切正常。
这是我的 shell webpack 配置:
const webpack = require("webpack");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "http://localhost:4200/",
uniqueName: "home",
},
optimization: {
runtimeChunk: false,
},
plugins: [
new ModuleFederationPlugin({
shared: {
"@angular/core": { eager: true, singleton: true },
"@angular/common": { eager: true, singleton: true },
"@angular/router": { eager: true, singleton: true }
},
}),
],
};
内容 webpack 配置:
const webpack = require("webpack");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "http://localhost:4201/",
uniqueName: "contentModul"
},
optimization: {
runtimeChunk: false,
},
plugins: [
new ModuleFederationPlugin({
name: "content",
library: { type: "var", name: "content" },
filename: "remoteEntry.js",
exposes: {
ContentModule:
"./projects/content/src/app/content/content.module.ts",
},
shared: {
"@angular/core": { eager: true, singleton: true },
"@angular/common": { eager: true, singleton: true },
"@angular/router": { eager: true, singleton: true }
},
}),
],
};
这是我的路由:
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { PageNotFoundComponent } from "./static-pages/page-not-found/page-not-found.component";
import { loadRemoteModule } from "./utils/federation-utils";
const routes: Routes = [
{ path: "", redirectTo: "home", pathMatch: "full" },
{ path: "home", component: HomeComponent },
{
path: "content",
loadChildren: () =>
loadRemoteModule({
remoteName: "content",
remoteEntry: "http://localhost:4201/remoteEntry.js",
exposedModule: "ContentModule",
}).then((m) => m.ContentModule)
},
{ path: "**", component: PageNotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
你知道什么是 missing/wrong 吗?
谢谢!
我遇到了完全相同的问题。我遇到的问题与 Angular 模块的导入有关。我在我的微前端中导入了 Angular 的 BrowserModule
,这是错误的。此模块只能导入到您的 shell 应用程序的根模块中。
微前端应该只导入 CommonModule
。如果您改为导入 BrowserModule
,这将破坏 Angular 运行时并导致错误,例如未正确捕获事件。
我在 MonoRepo 中有两个 Angular 应用程序,一个 shell 应用程序和一个内容应用程序。 shell 应用程序就像一个显示卡片的登录页面,单击它会显示内容应用程序。
在此内容应用程序中,我使用的是 mat-select 控件,它不会在外部单击时关闭面板 -> 问题! shell 应用程序似乎捕获了外部点击事件。 如果我在 shell 应用程序中使用 mat-select,一切正常。
这是我的 shell webpack 配置:
const webpack = require("webpack");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "http://localhost:4200/",
uniqueName: "home",
},
optimization: {
runtimeChunk: false,
},
plugins: [
new ModuleFederationPlugin({
shared: {
"@angular/core": { eager: true, singleton: true },
"@angular/common": { eager: true, singleton: true },
"@angular/router": { eager: true, singleton: true }
},
}),
],
};
内容 webpack 配置:
const webpack = require("webpack");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "http://localhost:4201/",
uniqueName: "contentModul"
},
optimization: {
runtimeChunk: false,
},
plugins: [
new ModuleFederationPlugin({
name: "content",
library: { type: "var", name: "content" },
filename: "remoteEntry.js",
exposes: {
ContentModule:
"./projects/content/src/app/content/content.module.ts",
},
shared: {
"@angular/core": { eager: true, singleton: true },
"@angular/common": { eager: true, singleton: true },
"@angular/router": { eager: true, singleton: true }
},
}),
],
};
这是我的路由:
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { PageNotFoundComponent } from "./static-pages/page-not-found/page-not-found.component";
import { loadRemoteModule } from "./utils/federation-utils";
const routes: Routes = [
{ path: "", redirectTo: "home", pathMatch: "full" },
{ path: "home", component: HomeComponent },
{
path: "content",
loadChildren: () =>
loadRemoteModule({
remoteName: "content",
remoteEntry: "http://localhost:4201/remoteEntry.js",
exposedModule: "ContentModule",
}).then((m) => m.ContentModule)
},
{ path: "**", component: PageNotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
你知道什么是 missing/wrong 吗?
谢谢!
我遇到了完全相同的问题。我遇到的问题与 Angular 模块的导入有关。我在我的微前端中导入了 Angular 的 BrowserModule
,这是错误的。此模块只能导入到您的 shell 应用程序的根模块中。
微前端应该只导入 CommonModule
。如果您改为导入 BrowserModule
,这将破坏 Angular 运行时并导致错误,例如未正确捕获事件。