Angular 13升级至15.1后出现__webpack_require__(...).context不是函数问题

你的问题核心是Angular 15调整了默认构建策略，强制ES模块优先，而require.context是Webpack的CommonJS风格API，在新的构建流程下无法被正确解析，尤其是在使用@angular-builders/custom-webpack的AngularJS/Angular混合项目中。以下是具体解决步骤：

1. 替换require.context为Webpack 5的ES模块API #

Webpack 5提供了import.meta.glob作为ES模块风格的替代方案，完全兼容Angular 15的构建规则。把你的代码改成：

// 替代原来的require.context调用
const modules = import.meta.glob('../src/xyz/**/*.(controller|directive).(js|ts)', { eager: true });
Object.values(modules).forEach(module => module.default?.());

• { eager: true }确保模块在初始化时就被加载，和原来的require.context行为一致
• 通配符语法对应原正则逻辑，**匹配任意子目录，*匹配文件名部分

2. 临时过渡：调整Angular构建配置允许CommonJS模块 #

如果暂时无法全量替换require.context，可以在angular.json中修改构建配置：

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "allowedCommonJsDependencies": ["webpack"],
            "commonJsVersion": "auto"
          }
        }
      }
    }
  }
}

同时在custom-webpack的配置文件中添加：

module.exports = {
  module: {
    parser: {
      javascript: {
        commonjsMagicComments: true
      }
    }
  }
};

3. 检查混合模式下的模块加载逻辑 #

AngularJS与Angular混合项目需注意：

• 避免在Angular的ES模块中直接调用CommonJS的require
• 将AngularJS相关脚本加载逻辑移到单独的CommonJS模块，再通过import()动态导入

4. 验证依赖版本兼容性 #

确保@angular-builders/custom-webpack版本与Angular 15匹配（需v15.x），执行更新命令：

npm install @angular-builders/custom-webpack@15 --save-dev

注意：require.context在Webpack 5的ES模块模式下已被标记为废弃，Angular 15强化了ES模块的使用规范，长期来看替换为import.meta.glob是最优解。

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