Angular 16升级至18后运行时报错：webpackContext不是函数

问题背景 #

Web应用Angular版本从16升级到18后，项目构建成功，但运行时抛出类型错误，import.meta对象中不存在webpackContext方法。

环境依赖 #

package.json中相关webpack依赖配置：

{
  "@ngtools/webpack": "^18.2.3",
  "@types/webpack": "^5.28.5",
  "webpack": "^5.94.0"
}

报错详情 #

运行时错误提示：

Uncaught TypeError: (intermediate value).webpackContext is not a function

触发错误的代码片段：

const context = (import.meta as any).webpackContext(
    '../../plugin/dist',
    { recursive: true, regExp: /\.(?:ogg|mp3|swf)$/, mode: 'lazy' }
);

解决方案 #

修改angular.json中的项目构建配置：

• 将构建器字段从 "@angular-devkit/build-angular:application" 替换为 "@angular-devkit/build-angular:browser"
• 将配置中的 "browser" 属性更改为 "main"

内容的提问来源于stack exchange，提问作者Adventitious Angles Qs Poster