angular - 使用 Webpack 5 模块联合提供样式和 Assets

Question

我已经在我的 Angular 11 应用程序中成功实现了相对较新的 webpack 5 模块联合系统，因此它可以从另一个构建远程按需加载模块。
我没有发现的一件事是如何处理样式表和图像等 Assets 。例如，联邦模块中有一个菜单元素需要自己的样式:

将它们放在组件的样式表中会使块膨胀，编译器会提示这一点，而且在显示菜单之前它们不会被加载

如果样式在联合模块的全局样式表上，则它们根本不会加载，因为我请求的是子模块而不是主模块(我假设)

该样式是特定于联邦模块的，因此不能放在加载器应用程序中

我想这些样式可以被编译并放入联合模块的构建 Assets 中，但是在使用和不使用联合时会断开链接。
我仍在试验这个，但我认为最好问一下。有人遇到过这个问题吗？

Answer 1

好吧，我要发布我想出的东西，它并不漂亮，但它似乎适用于 CSS Assets 。
首先，我在远程模块的构建中将它们分开:
Angular .json:

"styles": [
  "projects/xxx-admin/src/styles/styles.scss",
  "projects/xxx-admin/src/styles/admin.scss",
  {
    "input": "projects/xxx-admin/src/styles/admin.scss",
    "bundleName": "admin_module_styles",
    "inject": false
  }
],

这会生成一个带有明确的非自动生成名称的 CSS。然后我们从路由中的应用程序加载联合模块:

{
  path: "admin",
  component: AdminPanelComponent,
  canActivate: [XxxAdminGuard],
  loadChildren: () => {
    const baseUrl = getAdminFrontendBaseUrl();
    return loadAdminStyles().then(
      () => loadRemoteModule({
        remoteName: "xxx_admin",
        remoteEntry: `${baseUrl}/remoteEntry.js`,
        exposedModule: "AdminModule",
      }).then((m) => m.AdminModule));
  },
},

...

export function loadAdminStyles(): Promise<void> {
  return new Promise((resolve => {
    const baseUrl = getAdminFrontendBaseUrl();
    const el = document.getElementById("admin-module-styles");

    // Load one instance, do it like this to handle errors and retrying
    if (el) {
      el.remove();
    }
    const headEl = document.getElementsByTagName("head")[0];
    const styleLinkEl = document.createElement("link");
    styleLinkEl.rel = "stylesheet";
    styleLinkEl.id = "admin-module-styles";
    styleLinkEl.href = `${baseUrl}/admin_module_styles.css`;
    headEl.appendChild(styleLinkEl);
    resolve();
  }));
}

这是次优的，但我想不出更好的办法。