NX 工作区 - 角度 14 - 玩笑不工作

Question

我正在尝试将我的 Angular 13 NX 工作区升级到 Angular 14，但不知何故我无法让我的笑话单元测试正常工作。我从零开始尝试了以下方法：

\n

安装@angular/cli并nx全局：

\n

npm install --global @angular/cli@latest\nnpm install --global nx@latest\n

\n

在不带空格的路径中打开并cmd

\n

npx create-nx-workspace\n> test\n> angular\n> demo\n> scss\n

\n

结果：

\n

\n

Nx 正在创建您的 v13.10.5 工作区

\n

\n

所以现在我可以迁移到最新的 NX 工作区版本

\n

cd test\nnx migrate latest\n

\n

版本@angular/cli仍然是13，所以我在根中将其更改package.json为14.0.1（nx删除版本注释~并^...）

\n

npm install不成功。在工作区中jest-preset-angular@11.1.2需要这是一个固定的依赖项：@angular-devkit/build-angular@">=0.1002.4"@angular-devkit/build-angular@"14.0.1"

\n

npm ERR! Found: @angular-devkit/build-angular@13.3.7\nnpm ERR! node_modules/@angular-devkit/build-angular\nnpm ERR!   dev @angular-devkit/build-angular@"14.0.1" from the root project\nnpm ERR!   peer @angular-devkit/build-angular@">=0.1002.4" from jest-preset-angular@11.1.1\nnpm ERR!   node_modules/jest-preset-angular\nnpm ERR!     dev jest-preset-angular@"11.1.2" from the root project\n

\n

所以我改为运行更新：

\n

npm update\nnpx nx migrate --run-migrations\n

\n

我能够运行该项目

\n

npm start -- --open\n

\n

在运行单元测试命令之前，请script在根package.json scripts部分添加以下内容：

\n

{\n  ...,\n  "scripts: {\n    ...,\n    "nx": "nx"\n  }\n}\n

\n

现在我无法运行单元测试：

\n

npm run nx run-many -- --target=test --projects=demo --watch=false --browsers=ChromeHeadless\n\n FAIL   demo  apps/demo/src/app/app.component.spec.ts\n  \xe2\x97\x8f Test suite failed to run\n\n    Cannot find module \'@angular/core/testing\' from \'../../node_modules/jest-preset-angular/build/config/setup-jest.js\'\n\n    Require stack:\n      C:/repos/b/test/node_modules/jest-preset-angular/build/config/setup-jest.js\n      C:/repos/b/test/node_modules/jest-preset-angular/setup-jest.js\n      src/test-setup.ts\n\n      at Resolver.resolveModule (../../node_modules/jest-resolve/build/resolver.js:324:11)\n

\n

请注意，该模块肯定已安装：

\n

\n

其他问答建议更新jest-preset-angular，所以我就这么做了。我将其更改为12.1.0package.json中的内容。这需要jest@28.1.1，所以也改变一下。并且ts-jest应该在28.0.5.

\n

npm update现在运行成功了。但运行单元测试

\n

npm run nx run-many -- --target=test --projects=demo --watch=false --browsers=ChromeHeadless\n

\n

现在给出以下错误：

\n

ReferenceError: document is not defined\nNG0200: Circular dependency in DI detected for TestComponentRenderer. Find more at https://angular.io/errors/NG0200\nNG0200: Circular dependency in DI detected for InjectionToken DocumentToken. Find more at https://angular.io/errors/NG0200\n...\n

\n

它几乎暗示了以下内容：

\n

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.\n    Consider using the "jsdom" test environment.\n

\n

所以我安装了它：

\n

npm i --save-dev jest-environment-jsdom\n

\n

并更新了根jest.config.js：

\n

module.exports = {\n  projects: getJestProjects(),\n  testEnvironment: \'jest-environment-jsdom\'\n};\n

\n

这仍然给我同样的错误。我也尝试过testEnvironment: \'jsdom\'但没有成功。那么我该如何解决这个问题呢？或者我必须等到 NX 开发人员发布新的稳定版本吗？

\n

Answer 1

截至今天（就像刚才一样......）我能够升级到 14。

nx migrate latest

打开根package.json文件

• 恢复~和^
• 删除@angular/eslint仍在 13 上的软件包
• 手动更改@angular/cli为14.0.0

然后npm update就npx nx migrate --run-migrations按预期工作了。您将看到有关 的警告tsconfig。您需要打开每个库project.json并添加

"targets:build:options:tsConfig": "libs/my-lib/tsconfig.lib.json"

测试部分不需要修改，它会说tsconfig那里的字段已被弃用。

这是我最后的根package.json

{
  "name": "mintplayer-ng-bootstrap",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "nx",
    "nx": "nx",
    "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main",
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~14.0.2",
    "@angular/cdk": "~14.0.1",
    "@angular/common": "~14.0.2",
    "@angular/compiler": "~14.0.2",
    "@angular/core": "~14.0.2",
    "@angular/forms": "~14.0.2",
    "@angular/platform-browser": "~14.0.2",
    "@angular/platform-browser-dynamic": "~14.0.2",
    "@angular/router": "~14.0.2",
    "@mintplayer/ng-pagination": "~14.0.0",
    "@nrwl/angular": "14.3.5",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.7.2",
    "ngx-highlightjs": "~6.1.1",
    "qrcode": "^1.5.0",
    "rxjs": "~7.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~14.0.2",
    "@angular/cli": "~14.0.0",
    "@angular/compiler-cli": "~14.0.2",
    "@angular/language-service": "~14.0.2",
    "@nrwl/cli": "14.3.5",
    "@nrwl/cypress": "14.3.5",
    "@nrwl/eslint-plugin-nx": "14.3.5",
    "@nrwl/jest": "14.3.5",
    "@nrwl/linter": "14.3.5",
    "@nrwl/workspace": "14.3.5",
    "@types/jest": "27.4.1",
    "@types/node": "16.11.7",
    "@types/qrcode": "^1.4.2",
    "@typescript-eslint/eslint-plugin": "~5.24.0",
    "@typescript-eslint/parser": "~5.24.0",
    "cypress": "^9.1.0",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "27.5.1",
    "jest-preset-angular": "11.1.2",
    "ng-packagr": "^14.0.2",
    "postcss": "^8.4.5",
    "postcss-import": "^14.1.0",
    "postcss-preset-env": "^7.5.0",
    "postcss-url": "^10.1.3",
    "prettier": "^2.6.2",
    "ts-jest": "27.1.4",
    "typescript": "~4.7.3",
    "nx": "14.3.5"
  }
}

相关项目托管在这里