Angular13升级至18+Single-SPA微前端样式加载失败求助

问题背景 #

将基于Single-SPA和Angular的微前端项目从v13升级到v18后，样式完全失效且项目无法运行，触发报错：

Module not found: TypeError: Cannot read properties of undefined (reading 'tap'), The loader "./.component.scss" didn't return a string

已尝试操作：

• 在webpack配置中手动添加sass-loader
• 尝试样式覆盖方案
• 验证Angular构建配置与webpack设置

修复建议 #

1. 移除自定义SCSS Loader规则，避免与Angular内置处理冲突 #

Angular CLI（包括single-spa-angular集成）已内置SCSS编译逻辑，你在extra-webpack-config.js中手动添加的SCSS规则会覆盖或干扰默认loader链，导致异常。删除customConfig中的以下代码块：

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      exclude: /node_modules/,
    }
  ]
}

2. 调整Webpack配置合并策略（如需扩展规则） #

如果必须扩展样式规则，不要直接替换默认的module.rules，而是使用webpack-merge的自定义策略追加规则，确保Angular默认配置保留：
修改extra-webpack-config.js的导出逻辑：

const { mergeWithCustomize, customizeArray } = require('webpack-merge');

// ... 其他代码 ...

module.exports = (config, options) => {
  return mergeWithCustomize({
    customizeArray: customizeArray({
      'module.rules': 'append'
    })
  })(baseConfig(config, options), customConfig);
};

注意：自定义规则仅针对全局样式文件，不要覆盖组件SCSS的处理逻辑。

3. 升级single-spa-angular到兼容版本 #

single-spa-angular@9.2.0对Angular 18的适配性有限，建议升级到最新稳定版，确保与Angular 18构建链完全兼容：

npm install single-spa-angular@latest

4. 移除style-loader依赖 #

Angular生产构建默认使用mini-css-extract-plugin提取CSS到独立文件，style-loader会将CSS注入JS，两者冲突导致样式加载异常：

npm uninstall style-loader

5. 验证样式封装与隔离 #

• 检查组件ViewEncapsulation设置：Angular 18默认使用Emulated封装，在Single-SPA环境下，若需全局样式可临时改为None，或确保样式选择器不会被其他微应用污染。
• 采用Single-SPA样式隔离方案：在微应用挂载时添加样式前缀，或使用Single-SPA提供的样式加载/卸载机制避免样式冲突。

6. 清理缓存后重新构建 #

版本升级残留的缓存可能引发异常，执行以下命令清理后重新构建：

rm -rf node_modules package-lock.json
npm install
ng clean
npm run build:single-spa:app-project

内容的提问来源于stack exchange，提问作者Sindhu