Angular 15 模块联合风格不起作用

Question

Stack Overflow 社区您好，

我的 Angular 微前端项目遇到了问题，遇到以下与样式相关的错误。我使用 Angular 15 和 @angular-architects/module-federation/webpack 库进行微前端开发。

我在远程应用程序中添加全局样式时遇到问题。为了解决这个问题，我将 style.scss 导入到远程应用程序的共享模块中。

在 Angular 14 中，一切都很好，项目也进展顺利。但是，当我将 Angular 项目升级到版本 15 时，遇到了错误。

这是我的 webpack.config.js 文件：

const { withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const shareAll = mf.shareAll;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, "tsconfig.json"), []);
const webpackConfig = withModuleFederationPlugin({
  name: 'shareholders',
  exposes: {
    './PagesModule': './src/app/pages/pages.module.ts'
  },
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
});

module.exports = {
  ...webpackConfig,
  output: {
    uniqueName: "remoteapp1",
    publicPath: "auto",
  },
  optimization: {
    runtimeChunk: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  experiments: {
    outputModule: true,
  },
  plugins: [],
};

这是错误消息：

**File was processed with these loaders: *
./node_modules/resolve-url-loader/index.js *
./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js.
You may need an additional loader to handle the result of these
loaders.**

这是我的远程应用程序的示例代码。

我希望我的远程应用程序的样式能够在不依赖样式库的情况下工作。

如果有人遇到类似的问题或了解可能导致此问题的原因，我将非常感谢您的帮助。

谢谢！

Answer 1

我自己找到了解决方案！如果其他人遇到类似的问题，我已在 GitHub 存储库中记录了这些步骤：Angular Micro Frontend。请随意查看有关如何在 IIS 上为 Angular 应用程序正确配置反向代理的详细说明。希望有帮助！