在 Cypress 测试中从 @angular/cdk 导入任何内容都会破坏 Angular 13 的构建
Posted
技术标签:
【中文标题】在 Cypress 测试中从 @angular/cdk 导入任何内容都会破坏 Angular 13 的构建【英文标题】：Importing anything from @angular/cdk in Cypress tests breaks the build with Angular 13 【发布时间】：2022-01-02 20:11:54 【问题描述】：自从更新到 Angular 13 后，我从 @angular/cdk 导入的赛普拉斯测试（主要用于在 Angular 材料上使用测试工具）无法编译并出现以下错误：
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 包格式的变化有关。..
查看此 repo 以重现问题：https://github.com/pongells/angular13-cypress
【问题讨论】：
可能与这个question有关？ 请也输入您的tsconfig.ts。
它是否可以在一个干净的新创建的 Angular 13 项目上重现？您能否创建一个小型 github 存储库来证明这一点？
这是一个 repo：github.com/pongells/angular13-cypress 只需运行 e2e 测试即可查看失败
【参考方案1】：
与此同时，我们找到了解决方法：
const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')
module.exports = (on) =>
on('file:preprocessor', webpackPreprocessor(
typescript: require.resolve('typescript')
))
见：https://github.com/cypress-io/cypress/issues/19066
【讨论】：
以上是关于在 Cypress 测试中从 @angular/cdk 导入任何内容都会破坏 Angular 13 的构建的主要内容，如果未能解决你的问题，请参考以下文章