Angular升级Webpack4后Karma单元测试报错：externalModuleIndicator未定义

这个问题我之前在升级Angular项目到Webpack 4时也碰到过，核心原因是依赖版本不兼容——尤其是TypeScript、at-loader和karma-webpack这几个包和Webpack 4的适配问题。下面是一步步的解决方法：

1. 对齐TypeScript与at-loader版本 #

at-loader对TypeScript的版本依赖非常严格，你当前用的是typescript@2.7.2，必须搭配对应的at-loader版本才能正常工作。执行以下命令安装匹配的版本：

npm uninstall at-loader
npm install at-loader@^2.0.0 --save-dev

（at-loader@2.x系列专门适配TypeScript 2.7~2.8版本，完美匹配你的环境）

2. 升级karma-webpack到兼容Webpack 4的版本 #

旧版本的karma-webpack没有适配Webpack 4的模块内部结构，这正是触发externalModuleIndicator未定义错误的根源。升级到支持Webpack 4的版本：

npm uninstall karma-webpack
npm install karma-webpack@^4.0.2 --save-dev

3. 检查并修正tsconfig.json配置 #

确保你的src/tsconfig.json里的编译选项和Webpack 4兼容：

• 确认compilerOptions.module设置为esnext或commonjs（Webpack 4对这两种模块格式支持最好）
• 确保target设置为es5或更高，和你的Angular版本匹配
• 可以暂时关闭strict模式（如果开启的话），排查是否是严格模式导致的额外错误

4. 清理缓存并重新安装依赖 #

有时候缓存会导致依赖冲突，执行以下步骤彻底清理：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清理Karma缓存
npx karma clean

为什么会出现这个错误？ #

Webpack 4重构了模块系统的内部实现，旧版本的karma-webpack和at-loader在访问Webpack内部的模块对象时，找不到新增的externalModuleIndicator属性，从而抛出Cannot read property 'externalModuleIndicator' of undefined的错误。只要把这几个依赖升级到适配Webpack 4的版本，就能解决这个问题，同时那些子进程失败、大量编译错误的连锁问题也会随之消失。

内容的提问来源于stack exchange，提问作者raoul.nair