2

我有两个 Angular 应用程序，一个外壳应用程序和一个 MonoRepo 内的内容应用程序。shell 应用程序就像一个显示卡片的登录页面，点击它，内容应用程序就会显示出来。

在这个内容应用程序中，我使用了一个 mat-select 控件，它不会在外部单击时关闭面板 -> 问题！外壳应用程序似乎捕获了外部单击事件。如果我在 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 {}

你知道什么是缺失/错误吗？

谢谢！

4

1 回答 1

3

我有完全相同的问题。我遇到的问题与 Angular 模块的导入有关。BrowserModule我在我的微前端中导入了 Angular ，这是错误的。这个模块应该只在你的 shell 应用程序的根模块中被导入。

微前端应该只导入CommonModule。如果您BrowserModule改为导入，这将破坏 Angular 运行时并导致错误，例如未正确捕获事件。

于 2021-09-16T07:41:13.910 回答