Issue
I'm having issues running e2e
when building my application with the @nrwl/cypress
builder that I can't quite figure out.
I'm using a component library which is fine with the angular-devkit
builder, but when using @nrwl/cypress
, it seems webpack attempts to load these components from a relative path instead of the project root.
So, any components on the landing page will load fine but when I navigate to a different route, this route is used as the app base and my components fail to load.
I can't say for sure this is an issue with @nrwl/cypress
, only that it isn't happening with the angular-devkit
builder.
Some config:
"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"]
},
cypress.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"
}
]
}
Solution
The problem was that the baseHref property was not being set in the nx e2e project but it was set using the standard dev build.
I discovered this when I bumped the app to angular 14 and it complained about the baseHref flag. When I removed it I discovered the components were not loading even using the angular dev build in the same way the cypress builder was having issues.
Adding baseHref="/" to the cypress project build config resolved the issue.
Thanks everyone for your input.
Answered By - shanahobo86
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.