Angular 15迁移require.context至import.meta.webpackContext触发函数错误

问题分析 #

Angular 15 全面切换为基于ES模块的构建体系，import.meta.webpackContext 属于Webpack非标准API，官方并未将其作为require.context的推荐替代方案。同时Angular CLI默认构建配置会限制这类非标准API的使用，再加上Webpack 5+ 对该API的支持逻辑调整，最终导致出现{}.webpackContext is not a function错误。

解决方案 #

方案1：用标准ESM动态导入 + glob匹配（推荐） #

放弃非标准API，改用符合ESM规范的动态导入结合glob实现批量导入，兼容性和可维护性更强：

1. 安装依赖：

npm install glob --save-dev
npm install @types/glob --save-dev

2. 修改代码：

import glob from 'glob';

const cache: Record<string, any> = {};

async function importAll() {
  const targetDirs = [
    './services/',
    './components/',
    './directives/',
    './filters/',
    './native-extensions/',
    './prototypes/',
    './views/',
  ];

  for (const dir of targetDirs) {
    // 匹配目录下所有非spec的ts/js文件
    const matchedFiles = glob.sync(`${dir}/**/*.{ts,js}`, { 
      ignore: `${dir}/**/*.spec.{ts,js}` 
    });
    
    for (const file of matchedFiles) {
      // 根据当前文件路径调整导入前缀，确保路径正确
      const module = await import(`../${file}`);
      cache[file] = module;
    }
  }
}

// 执行批量导入
importAll();

方案2：自定义Webpack配置启用webpackContext #

如果必须保留原有逻辑，需修改Angular CLI的Webpack配置以启用该API：

1. 安装自定义构建器：

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

2. 项目根目录创建webpack.config.js：

module.exports = {
  experiments: {
    importMeta: true
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
              require.resolve('babel-plugin-transform-import-meta-webpack')
            ]
          }
        }
      }
    ]
  }
};

3. 修改angular.json替换构建器：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            // 保留原有其他配置
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server"
        }
      }
    }
  }
}

4. 安装babel插件：

npm install babel-plugin-transform-import-meta-webpack --save-dev

方案3：针对Angular模块/服务的批量注册优化 #

如果批量导入是为了注册服务、组件等，可直接利用Angular的模块体系简化逻辑：

比如服务批量注册：

// 在services/index.ts导出所有服务
export * from './auth.service';
export * from './user.service';

// 在根模块中注册
import * as allServices from './services';

@NgModule({
  providers: Object.values(allServices).filter(item => typeof item === 'function')
})
export class AppModule {}

注意事项 #

• Angular 15 优先遵循ESM规范，尽量避免依赖Webpack私有API，减少后续升级风险
• 动态导入时需仔细核对文件路径，避免因路径错误导致模块找不到
• glob匹配规则需根据项目实际目录结构调整，确保忽略spec文件的逻辑生效

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