设置 nrwl/nx 工作区，带有角通用，cypress 打字问题

Posted 2023-03-23

【中文标题】设置 nrwl/nx 工作区，带有角通用，cypress 打字问题

【英文标题】：Setup nrwl/nx workspace with angular universal, cypress typing issue

【发布时间】：2019-06-30 11:44:11

【问题描述】：

TL;DR

当运行yarn webpack:server 时出现错误Cannot find name 'cy'.

示例代码库： Branch showing error

---

错误说明

您好，我正在尝试设置一个最小可行产品项目以在 nrwl/nx workspace 中测试 angular universal。

大部分设置都是使用带有 nrwl/nx 示意图的 ng cli 完成的：

create-nx-workspace nx-workspace-with-s-s-r --yarn ng g app nx-app（jest & cypress 用于测试） yarn update (update using the nrwl/nx schematic) ng g universal (nrwl/nx schematic for setting up universal)

当这些步骤完成后，我尝试按照the following guide 了解如何构建和服务 s-s-r 应用程序。

我更改了示例脚本中的路径以匹配我的 nx 项目。

当运行yarn webpack:server 给我错误Cannot find name 'cy'.

我认为这很奇怪，因为我什至不想从apps/nx-app-e2e/ 文件夹构建文件。所以我猜tsconfig* 的一些文件有问题，但我似乎找不到问题。

设置

Angular CLI: 7.3.0
Node: 10.14.1
OS: win32 x64
Angular: 7.2.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.3.0
@angular-devkit/schematics        7.3.0
@angular/cli                      7.3.0
@ngtools/webpack                  7.1.4
@schematics/angular               7.3.0
@schematics/update                0.13.0
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.23.1

失败日志

$ yarn webpack:server
yarn run v1.13.0
$ webpack --config webpack.server.config.js --progress --colors
Hash: d991a357a6372aad06d8
Version: webpack 4.23.1
Time: 8716ms
Built at: 02/06/2019 2:24:07 PM
 1 asset
Entrypoint server = server.js
  [1] ./node_modules/@angular/core/fesm5/core.js + 4 modules 974 KiB 0 [built] [2 warnings]
      |    5 modules
  [4] ./node_modules/rxjs/_esm5/internal/Observable.js + 2 modules 5.33 KiB 0 [built]
      |    3 modules
 [11] external "path" 42 bytes 0 [built]
 [12] ./node_modules/@ngrx/store/fesm5/store.js + 10 modules 43.8 KiB 0 [built]
      |    11 modules
 [27] external "fs" 42 bytes 0 [built]
 [47] ./node_modules/@ngrx/effects/fesm5/effects.js + 4 modules 21.7 KiB 0 [built]
      |    5 modules
 [55] external "url" 42 bytes 0 [built]
 [85] external "events" 42 bytes 0 [built]
 [86] external "crypto" 42 bytes 0 [built]
[106] ./node_modules/@angular/platform-server/fesm5/platform-server.js + 2 modules 1.24 MiB 0 [built]
      |    3 modules
[109] ./apps/nx-app/src lazy namespace object 160 bytes 0 [built]
[158] external "timers" 42 bytes 0 [optional] [built]
[245] ./dist/apps/nx-app-server/main.js 39.7 KiB 0 [built]
[261] ./node_modules/@nrwl/nx/esm5/nrwl-nx.js + 17 modules 308 KiB 0 [built]
      |    18 modules
[262] ./server.ts + 1 modules 5.38 KiB 0 [built]
      | ./server.ts 1.81 KiB [built]
      |     + 1 hidden module
    + 358 hidden modules

WARNING in ./node_modules/@angular/core/fesm5/core.js 18261:15-36
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./server.ts 5:0-47 11:0-14

WARNING in ./node_modules/@angular/core/fesm5/core.js 18273:15-102
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./server.ts 5:0-47 11:0-14

ERROR in C:\Development\Temp\nx-worspace-with-s-s-r\apps\nx-app-e2e\src\integration\app.spec.ts
[tsl] ERROR in C:\Development\Temp\nx-worspace-with-s-s-r\apps\nx-app-e2e\src\integration\app.spec.ts(4,20)
      TS2304: Cannot find name 'cy'.

ERROR in C:\Development\Temp\nx-worspace-with-s-s-r\apps\nx-app-e2e\src\support\app.po.ts
[tsl] ERROR in C:\Development\Temp\nx-worspace-with-s-s-r\apps\nx-app-e2e\src\support\app.po.ts(1,34)
      TS2304: Cannot find name 'cy'.
error Command failed with exit code 2.

【参考方案1】：

设法通过更改某些文件的结构来构建 s-s-r。 View commit here

【讨论】：

感谢分享，这在我构建 same 时帮助了我。我使用@nestjs/ng-universal 作为 s-s-r 组件。

在 Stefan 和 @servrox 非常感谢大家。我也建了同样的。我也为此写了一篇博文：medium.com/@philip_lysenko/…