升级Angular至12后source-map-loader报错this.getOptions is not a function如何解决

可尝试的调试方案 #

• 排查webpack多版本冲突
  Angular CLI 会内置绑定对应版本的webpack依赖，你自行安装的webpack版本可能未被实际加载执行。执行npm ls webpack（npm环境）或yarn list webpack（yarn环境）检查是否存在多个webpack版本共存：

  • 若使用npm 8+，可在package.json中添加overrides字段强制统一webpack版本：

    {
      "overrides": {
        "webpack": "^5.0.0"
      }
    }
    

  • 若使用yarn，可在package.json中添加resolutions字段强制统一webpack版本：

    {
      "resolutions": {
        "webpack": "^5.0.0"
      }
    }
    

  配置完成后删除node_modules和锁文件重新安装依赖。

• 调整source-map-loader版本适配
  source-map-loader v4及以上版本仅支持webpack 5，如果当前项目实际运行的是Angular 12内置的webpack 4兼容版本，就会触发this.getOptions不存在的报错。可尝试降级source-map-loader到兼容webpack 4的3.x版本：

  npm i source-map-loader@3.x -D
  # 或yarn add source-map-loader@3.x -D
  

• 使用Angular原生sourceMap配置替代自定义loader
  Angular 12开始内置支持完整的sourceMap提取能力，不需要额外配置source-map-loader。打开angular.json，找到对应项目的build配置节点，修改options下的sourceMap配置即可：

  {
    "build": {
      "options": {
        "sourceMap": {
          "scripts": true,
          "styles": true,
          "vendor": true
        }
      }
    }
  }
  

  开启vendor: true即可提取第三方依赖的sourceMap，和自定义source-map-loader效果一致，同时不会有版本冲突问题。

• 检查自定义webpack构建器版本匹配
  如果你使用@angular-builders/custom-webpack加载自定义webpack配置，需确保其版本和Angular 12完全匹配，即@angular-builders/custom-webpack的大版本号必须为12.x，版本不匹配会导致webpack上下文传递异常，触发loader调用报错。

• 强制指定loader加载路径
  可在webpack配置中通过require.resolve明确指定加载项目根目录安装的source-map-loader，避免加载到node_modules嵌套目录下的其他版本：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          enforce: "pre",
          use: [require.resolve("source-map-loader")],
        },
      ],
    },
  };
  

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