Angular 5执行ng test命令时出现HeadlessChrome报错求助

你遇到的HeadlessChrome 65.0.3325 (Windows 10.0.0) ERROR Uncaught TypeError: Cannot read property 'fn' of undefined报错，大概率是第三方依赖库（尤其是依赖jQuery的插件）没有正确加载导致的——fn是jQuery原型链上的常用属性，当代码尝试访问$.fn但jQuery还没被初始化时就会抛出这个错误。结合你Angular 5的项目配置，我整理了几个排查和解决步骤：

1. 确认项目依赖的jQuery及相关插件 #

首先检查你的package.json是否包含jquery依赖，以及是否引入了Bootstrap JS、DataTables这类依赖jQuery的库。如果有，确保jQuery的版本和Angular 5兼容（推荐使用jQuery 3.x系列，避免过旧的版本）。

2. 调整.angular-cli.json的scripts加载顺序 #

Angular 5使用.angular-cli.json管理全局脚本，你需要确保jQuery的脚本路径排在所有依赖它的库前面，这样Webpack打包时会优先加载jQuery，后续插件才能找到$对象。示例配置：

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  // 其他依赖jQuery的插件脚本
]

3. 检查Karma测试配置（karma.conf.js） #

有时候测试环境的打包逻辑和开发环境不同，需要手动在Karma配置中确保jQuery被正确引入。打开karma.conf.js，在files数组中添加jQuery的路径：

files: [
  './node_modules/jquery/dist/jquery.min.js',
  // 其他需要在测试中加载的全局脚本
]

或者确认angular-cli已经将.angular-cli.json中配置的scripts自动包含到测试打包中（Angular CLI默认会处理，但如果有自定义配置可能需要手动调整）。

4. 规范组件内的jQuery使用方式 #

如果你的组件代码中直接使用了$，需要：

• 在组件顶部添加全局变量声明：declare var $: any;，避免TypeScript编译报错
• 避免在ngOnInit中直接调用依赖DOM的jQuery方法，改用ngAfterViewInit钩子（确保DOM元素已渲染完成）

验证步骤 #

完成上述配置后，执行以下操作确保依赖生效：

1. 删除node_modules文件夹和package-lock.json文件
2. 重新运行npm install安装依赖
3. 再次执行ng test查看报错是否消失

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