从Webpack2迁移至Webpack4、Angular4迁移至Angular5时Webpack编译报错：无法解析@angular/core

我之前在从Webpack2升级到4、Angular4升级到5的时候，踩过一模一样的坑，这个Could not resolve module @angular/core的错误其实大多是依赖版本不兼容或者配置没跟上导致的，给你几个实用的解决步骤：

• 统一Angular依赖版本
  迁移时最容易犯的错就是部分Angular包没同步升级到5.x版本，比如@angular/core更到了5，但@angular/compiler还停留在4，就会出现模块解析失败。你可以先执行npm list @angular/core查看当前版本，然后把所有@angular/*包统一升级到同一个稳定的5.x版本，比如：

  npm install @angular/{core,common,compiler,platform-browser,platform-browser-dynamic,cli,forms,http}@5.2.11 --save
  

  别忘了同步升级@angular/compiler-cli，这个是Angular编译必须的开发依赖：

  npm install @angular/compiler-cli@5.2.11 --save-dev
  

• 清理依赖缓存与重装
  旧依赖的缓存或者残留文件经常会引发奇怪的解析问题，建议按以下步骤操作：

  1. 删除node_modules文件夹：rm -rf node_modules（Windows系统用rmdir /s /q node_modules）
  2. 清理npm缓存：npm cache clean --force
  3. 重新安装所有依赖：npm install

• 检查Webpack resolve配置
  Webpack4的模块解析逻辑和Webpack2有差异，确保你的webpack.config.js里的resolve配置正确：

  const path = require('path');
  
  module.exports = {
    // ...其他配置
    resolve: {
      extensions: ['.ts', '.js'], // 确保包含.ts和.js扩展名
      modules: [path.resolve(__dirname, 'src'), 'node_modules'] // 优先从src和node_modules找模块
    }
  };
  

  同时检查有没有错误的alias配置，比如之前为@angular/core设置的别名可能指向了旧路径，需要删除或更新。

• 适配Angular5的TypeScript配置
  Angular5对TypeScript版本有要求（2.4.x~2.8.x），建议安装兼容的版本，比如：

  npm install typescript@2.6.2 --save-dev
  

  然后检查tsconfig.json的关键配置：

  {
    "compilerOptions": {
      "target": "es2015",
      "module": "es2015",
      "moduleResolution": "node",
      "lib": ["es2015", "dom"]
    },
    "angularCompilerOptions": {
      "skipMetadataEmit": true,
      "preserveWhitespaces": false
    }
  }
  

• 调试模块解析路径
  你已经用node --inspect-brk ./node_modules/.bin/webpack-cli开启了调试，可以在StaticSymbolResolver.getSymbolByModule的断点处，查看代码尝试加载的@angular/core具体路径，确认是不是指向了node_modules里的正确文件——如果路径错误，大概率是配置或依赖安装的问题。

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