Angular4.x构建报错：无法解析classlist.js，启用IE兼容polyfills后构建失败求解决

你已经做了为IE兼容启用polyfills并安装依赖的关键操作，却还是遇到构建报错，试试下面这些针对性的解决方案：

1. 核对polyfills.ts的引入配置 #

打开项目根目录下的src/polyfills.ts文件，找到classlist相关的引入行，确保它是完全正确且未被注释的：

// 确保这一行没有被注释，且拼写完全正确
import 'classlist.js';

注意：classlist.js是全小写的，别写错大小写，也不要多加多余的符号。

2. 验证依赖安装的完整性 #

• 检查项目根目录的package.json文件，确认dependencies里已经包含classlist.js：

  "dependencies": {
    // ...其他依赖
    "classlist.js": "^1.1.200"
  }
  

• 如果package.json里没有这个依赖，重新执行安装命令：

  npm install --save classlist.js
  

• 若安装后仍有问题，尝试清理缓存后重新安装：

  # 删除依赖文件夹和锁文件
  rm -rf node_modules package-lock.json
  # 重新安装所有依赖
  npm install
  

3. 检查Angular CLI的构建配置（针对Angular 4.x的angular-cli.json） #

Angular 4.x使用的是angular-cli.json而非新版的angular.json，如果polyfills引入仍不生效，可以尝试在配置文件的scripts数组中手动添加classlist.js的路径：

"apps": [
  {
    // ...其他配置
    "scripts": [
      "../node_modules/classlist.js/classlist.min.js"
    ]
  }
]

注意路径要根据你的项目结构调整，确保指向node_modules里的classlist.min.js文件。

4. 清理Angular CLI缓存并重新构建 #

Angular CLI的缓存可能导致依赖未被正确识别，执行以下命令清理缓存后重新构建：

# Angular CLI 1.x（对应Angular 4.x）的缓存清理命令
ng cache clean
# 重新启动开发服务或构建
ng serve
# 或者生产构建
ng build --prod

5. 确认浏览器目标配置 #

打开项目根目录的browserslist文件，确保里面包含了IE的目标版本，Angular CLI会根据这个文件决定是否启用相应的polyfills：

# 确保包含IE相关配置
IE 9-11

如果以上步骤都尝试后仍有问题，可以查看控制台报错的完整堆栈信息，确认是否有其他关联依赖未正确配置。

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