Angular 14升级后Cypress E2E测试编译失败：模块无法解析

1. Angular 14升级后，其内置的Cypress E2E测试Webpack配置发生变更，模块解析逻辑与旧版本不兼容，导致原本正常的模块导入路径无法被正确识别。
2. 虽然Webpack已尝试查找projects/node_modules目录，但@shift/simulator-plugins包的内部文件结构、入口配置，或是Cypress对模块别名的解析规则出现偏差，最终无法匹配到导入路径对应的文件。

方法1：检查包的实际文件结构 #

• 进入D:\git\template\projects\node_modules\@shift\simulator-plugins目录，确认是否存在plugins/simulatorplugin/simulatorplugin对应的文件（如simulatorplugin.ts、simulatorplugin.js或带扩展名的文件）。
• 如果文件存在但扩展名不符，可尝试在导入时添加扩展名，或在Webpack配置中补充对应的扩展名解析规则。

方法2：修改Cypress的Webpack配置 #

在Cypress配置文件（通常为cypress/plugins/index.js或cypress.config.js）中，手动配置Webpack的解析规则：

const webpack = require('webpack');

module.exports = (on, config) => {
  on('file:preprocessor', webpack({
    resolve: {
      // 明确指定node_modules路径
      modules: [
        'D:\\git\\template\\projects\\node_modules',
        'node_modules'
      ],
      // 按需添加别名映射
      alias: {
        '@shift/simulator-plugins': 'D:\\git\\template\\projects\\node_modules\\@shift\\simulator-plugins'
      }
    }
  }));
  return config;
};

方法3：调整npm包安装位置 #

将node_modules移至项目根目录（符合npm默认规范），执行以下命令：

# 删除现有projects目录下的node_modules
rm -rf projects/node_modules
# 在项目根目录重新安装依赖
npm install

方法4：检查Angular E2E配置 #

打开angular.json，查看projects.e2e.architect.test.options下的Webpack相关配置，确认升级过程中是否丢失了resolve.modules配置项，若缺失则手动添加projects/node_modules路径。

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