由于路径错误，NX Cypress 构建器未加载组件

Question

e2e我在使用构建器构建应用程序时遇到运行问题@nrwl/cypress，我不太清楚。

我正在使用一个适合angular-devkit构建器的组件库，但是在使用时@nrwl/cypress，webpack 似乎尝试从相对路径而不是项目根目录加载这些组件。

因此，登陆页面上的任何组件都可以正常加载，但是当我导航到不同的路线时，该路线将用作应用程序基础，并且我的组件无法加载。

我不能肯定地说这是 的问题@nrwl/cypress，只是构建器不会发生这种情况angular-devkit。

一些配置：

"myapp-e2e": {
    "root": "apps/myapp-e2e",
    "sourceRoot": "apps/myapp-e2e/src",
    "projectType": "application",
    "architect": {
      "e2e": {
        "builder": "@nrwl/cypress:cypress",
        "options": {
          "cypressConfig": "apps/myapp-e2e/cypress.json",
          "tsConfig": "apps/myapp-e2e/tsconfig.e2e.json",
          "devServerTarget": "myapp:serve"
        },
        "configuration": {
          "production": {
            "devServerTarget": "myapp:serve:production"
          }
        }
      },
      "lint": {
        "builder": "@nrwl/linter:eslint",
        "options": {
          "lintFilePatterns": ["apps/myapp-e2e/**/*.{js,ts}"]
        }
      }
    },
    "tags": [],
    "implicitDependencies": ["myapp"]
  },

赛普拉斯.json

{
  "fileServerFolder": ".",
  "fixturesFolder": "./src/fixtures",
  "integrationFolder": "./src/integration",
  "modifyObstructiveCode": false,
  "pluginsFile": "./src/plugins/index",
  "supportFile": "./src/support/index.ts",
  "video": false,
  "videosFolder": "../../dist/cypress/apps/myapp-e2e/videos",
  "screenshotsFolder": "../../dist/cypress/apps/myapp-e2e/screenshots",
  "chromeWebSecurity": false,
  "pageLoadTimeout": 120000,
  "viewportWidth": 2100,
  "viewportHeight": 1080,
  "env": {
    "entitlements_url": "/entitlementapi/entitlements/"
  }
}

tsconfig.e2e.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "sourceMap": false,
    "outDir": "../../dist/out-tsc",
    "allowJs": true,
    "types": ["cypress", "node"]
  },
  "include": ["src/**/*.ts", "src/**/*.js"]
}

tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": ["**/*.ts"],
  "references": [
    {
      "path": "./tsconfig.e2e.json"
    }
  ]
}

Answer 1

问题在于，baseHref 属性未在 nx e2e 项目中设置，但它是使用标准开发版本设置的。

当我将应用程序升级到 Angle 14 时，我发现了这一点，并且它抱怨了 baseHref 标志。当我删除它时，我发现即使使用 Angular dev 构建，组件也不会加载，就像 cypress 构建器遇到问题一样。

将 baseHref="/" 添加到 cypress 项目构建配置解决了该问题。

谢谢各位的意见。