升级Angular13后Cypress测试导入@angular/cdk编译失败如何解决？

问题现象 #

将项目升级至Angular 13版本后，在Cypress测试中导入@angular/cdk（主要用于Angular Material测试工具集）时编译失败，抛出Webpack编译错误，提示无法解析@angular/common依赖，完整错误信息如下：

Error: Webpack Compilation Error
./node_modules/@angular/cdk/fesm2015/platform.mjs
Module not found: Error: Can't resolve '@angular/common' in 'C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\fesm2015'
resolve '@angular/common' in 'C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\fesm2015'
  Parsed request is a module
  using description file: C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\package.json (relative path: ./fesm2015)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\fesm2015\node_modules doesn't exist or is not a directory
      C:\dev\workspace\exp\cypress-test\node_modules\@angular\node_modules doesn't exist or is not a directory
      C:\dev\workspace\exp\cypress-test\node_modules\node_modules doesn't exist or is not a directory
      C:\dev\workspace\exp\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules
        using description file: C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
      looking for modules in C:\dev\workspace\exp\cypress-test\node_modules
        using description file: C:\dev\workspace\exp\cypress-test\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\package.json (relative path: .)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
      looking for modules in C:\dev\node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
      looking for modules in C:\dev\workspace\node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common is not a file
            .js
              Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\package.json (relative path: ./node_modules/@angular/common)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.json doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.jsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.json doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.js doesn't exist
        .json
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.mjs doesn't exist
            .coffee
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.jsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.js doesn't exist
        .json
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.json doesn't exist
        .jsx
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.coffee doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.mjs doesn't exist
            .coffee
              Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.json doesn't exist
        .jsx
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.jsx doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.coffee doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.jsx doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.mjs doesn't exist
        .coffee
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.tsx doesn't exist
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.mjs doesn't exist
        .coffee
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.coffee doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.tsx doesn't exist
            as directory
              existing directory
                using path: C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index
                  using description file: C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\package.json (relative path: ./index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.coffee doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.ts doesn't exist
        .tsx
          Field 'browser' doesn't contain a valid alias configuration
            as directory
              C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common doesn't exist
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.ts doesn't exist
        .tsx
          Field 'browser' doesn't contain a valid alias configuration
          C:\dev\node_modules\@angular\common.tsx doesn't exist
        as directory
          C:\dev\node_modules\@angular\common doesn't exist
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.js doesn't exist
                    .json
                      Field 'browser' doesn't contain a valid alias configuration
          C:\dev\workspace\node_modules\@angular\common.tsx doesn't exist
        as directory
          C:\dev\workspace\node_modules\@angular\common doesn't exist
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.json doesn't exist
                    .jsx
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.jsx doesn't exist
                    .mjs
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.mjs doesn't exist
                    .coffee
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.coffee doesn't exist
                    .ts
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.ts doesn't exist
                    .tsx
                      Field 'browser' doesn't contain a valid alias configuration
                      C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.tsx doesn't exist
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\fesm2015\node_modules]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\node_modules]
[C:\dev\workspace\exp\cypress-test\node_modules\node_modules]
[C:\dev\workspace\exp\node_modules]
[C:\node_modules]
[C:\dev\node_modules\package.json]
[C:\dev\workspace\node_modules\package.json]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.js]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common]
[C:\dev\node_modules\@angular\common\package.json]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.json]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.js]
[C:\dev\workspace\node_modules\@angular\common\package.json]
[C:\dev\node_modules\@angular\common]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.jsx]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.json]
[C:\dev\workspace\node_modules\@angular\common]
[C:\dev\node_modules\@angular\common.js]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.mjs]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.jsx]
[C:\dev\workspace\node_modules\@angular\common.js]
[C:\dev\node_modules\@angular\common.json]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.coffee]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.mjs]
[C:\dev\workspace\node_modules\@angular\common.json]
[C:\dev\node_modules\@angular\common.jsx]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.ts]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.coffee]
[C:\dev\workspace\node_modules\@angular\common.jsx]
[C:\dev\node_modules\@angular\common.mjs]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common.tsx]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.ts]
[C:\dev\workspace\node_modules\@angular\common.mjs]
[C:\dev\node_modules\@angular\common.coffee]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\cdk\node_modules\@angular\common.tsx]
[C:\dev\workspace\node_modules\@angular\common.coffee]
[C:\dev\node_modules\@angular\common.ts]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index]
[C:\dev\workspace\node_modules\@angular\common.ts]
[C:\dev\node_modules\@angular\common.tsx]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.js]
[C:\dev\workspace\node_modules\@angular\common.tsx]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.json]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.jsx]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.mjs]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.coffee]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.ts]
[C:\dev\workspace\exp\cypress-test\node_modules\@angular\common\index.tsx]
 @ ./node_modules/@angular/cdk/fesm2015/platform.mjs 3:0-52 38:14-31
 @ ./cypress/integration/spec.ts

根因说明 #

该问题确实与Angular包格式更新有关：Angular 13之后官方全面切换为ESM格式分发npm包，默认输出后缀为.mjs的模块文件，而Cypress默认的Webpack预处理配置未将.mjs纳入可解析的扩展名范围，也没有适配Angular ESM包的依赖解析规则，导致无法正常识别@angular/common这类基础依赖。

可行解决方案 #

• 方案一：配置Cypress Webpack预处理规则
  在项目cypress/plugins/index.js文件中添加如下配置，手动指定Webpack可解析的扩展名包含.mjs：

const webpackPreprocessor = require('@cypress/webpack-preprocessor')

module.exports = (on) => {
  const webpackOptions = {
    resolve: {
      extensions: ['.ts', '.js', '.mjs']
    }
  }
  on('file:preprocessor', webpackPreprocessor({ webpackOptions }))
}

• 方案二：升级Cypress到9.7.0及以上版本
  9.7.0及以上版本的Cypress已经默认适配了Angular 13+的ESM包格式，无需额外修改配置即可正常解析.mjs模块，执行以下命令升级即可：
  npm i cypress@^9.7.0 --save-dev
• 方案三：调整TypeScript模块解析策略
  修改项目根目录的tsconfig.json文件，将compilerOptions下的module和moduleResolution调整为node16，适配ESM格式的依赖解析规则：

{
  "compilerOptions": {
    "module": "node1