Angular 5运行报错：No module factory available for dependency type: ContextElementDependency

这个错误我之前帮同事排查过好几次，大概率是webpack版本不匹配或者本地依赖缓存异常导致的——毕竟队友用相同代码没问题，说明代码本身是正常的，问题肯定出在本地依赖环境或者锁定文件的差异上。试试下面这些针对性的解决步骤：

1. 彻底清除依赖缓存并重装 #

有时候npm/yarn的缓存里会残留旧版本的依赖，哪怕删了node_modules也没用，先彻底清掉：

• 如果你用npm：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  

• 如果你用yarn：

  yarn cache clean
  rm -rf node_modules yarn.lock
  yarn install
  

2. 锁定webpack到Angular 5兼容的版本 #

Angular 5对应的webpack版本是^3.10.0，如果你的package.json里没明确指定，很可能安装了更高版本的webpack导致冲突。手动把它加到devDependencies里：

"devDependencies": {
  // 其他依赖...
  "webpack": "^3.10.0",
  // 其他依赖...
}

然后重新执行依赖安装命令。

3. 同步Angular CLI版本到兼容范围 #

Angular 5对应的Angular CLI版本是1.5.x，如果你的全局或本地CLI版本太高，也会引发依赖不兼容：

# 先卸载全局的高版本CLI
npm uninstall -g @angular/cli
# 安装Angular 5适配的CLI版本
npm install -g @angular/cli@1.5.8
# 本地项目也同步安装这个版本
npm install --save-dev @angular/cli@1.5.8

4. 清理Angular CLI的构建缓存 #

有时候构建缓存会残留异常数据，试试清理后重新构建：

ng clean
ng serve # 或者ng build --prod

如果以上步骤都没解决问题，麻烦把你的package.json完整内容贴出来，这样能更精准地定位依赖冲突的点~

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