Angular6升级到12后报single-spa-angular无builders定义错误

问题根因 #

single-spa-angular从5.x版本开始，将原内置的Angular构建builder能力迁移到了独立的@single-spa/angular包中，你当前使用的single-spa-angular@5.0.2已无内置builder定义，因此Angular CLI运行构建时无法找到对应的构建器触发报错。

修复步骤 #

• 第一步：卸载旧依赖，安装适配Angular 12的新依赖包
  执行以下命令：

  npm uninstall single-spa-angular
  npm install @single-spa/angular@12 --save-dev
  

  注意@single-spa/angular的主版本号需要和你项目使用的Angular主版本号保持一致，Angular 12请安装12.x版本的对应包。
• 第二步：修改angular.json中的构建器配置
  找到项目对应的architect配置节点，将原有的builder引用路径替换：
  原配置示例：

  "architect": {
    "build": {
      "builder": "single-spa-angular:build",
      // 其余原有配置保持不变
    },
    "serve": {
      "builder": "single-spa-angular:dev-server",
      // 其余原有配置保持不变
    }
  }
  

  修改后配置：

  "architect": {
    "build": {
      "builder": "@single-spa/angular:build",
      // 其余原有配置保持不变
    },
    "serve": {
      "builder": "@single-spa/angular:dev-server",
      // 其余原有配置保持不变
    }
  }
  

• 第三步：清理缓存重新构建
  删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件，重新执行npm install安装依赖，之后再运行构建命令即可正常构建。

注意事项 #

如果原有配置中使用了single-spa-angular的自定义参数，可先直接复用，大部分参数和新包的配置完全兼容，若出现参数不识别的报错，对应调整为新包的配置参数即可。

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