Cypress CT + Angular can't resolve assets from stylesheets

[Leosvel Pérez Espinosa]

Current behavior

When running Cypress CT on an Angular project where assets are copied from a directory structure other than <project-root>/src/assets to /assets (probably when the number of path segments is different between source and destination), the assets can't be resolved from stylesheets. Serving the application works correctly.

// angular.json
{
  ...
  "projects": {
    "ng-cypress-ct-issue": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            ...
            "assets": [
              "src/favicon.ico",
              {
                "glob": "**/*",
                "input": "src/public/assets",
                "output": "/assets"
              }
            ],
          }
        },
        ...
      }
    }
  }
}

# src/app/app.component.scss
.logo {
  width: 200px;
  height: 200px;
  background-image: url("/assets/logo.svg");
}

When running Cypress CT (ng run <project>:ct), the image is not displayed and an error is printed in the terminal:

ERROR in ./src/app/app.component.scss?ngResource
Module Error (from ./node_modules/.pnpm/postcss-loader@8.1.1_postcss@8.4.35_typescript@5.4.5_webpack@5.90.3/node_modules/postcss-loader/dist/cjs.js):
/Users/leosvel/code/playground/ng-cypress-ct-issue/src/app/app.component.scss:4:2: Can't resolve '../assets/logo.svg' in '/Users/leosvel/code/playground/ng-cypress-ct-issue/src/app'

Desired behavior

Running Cypress CT on an Angular project should work correctly and resolve assets regardless of their directory structure as long as their configuration is correct and they work when serving the application.

Test code to reproduce

Repo: https://github.com/leosvelperez/ng-cypress-ct-issue

Reproduction steps:

git clone https://github.com/leosvelperez/ng-cypress-ct-issue.git
cd ng-cypress-ct-issue
pnpm i
pnpm run ct # ng run ng-cypress-ct-issue:ct --no-watch

Cypress Version

13.8.1

Node version

v20.12.0

Operating System

macOS 14.4.1

Debug Logs

No response

Other

No response

[Leosvel Pérez Espinosa]

Even when using a standard src/assets directory, there's an extra small issue with the <img> tag. If the provided path has a leading / the image is not resolved correctly, and there's a 404 error in the network tab. If there's no leading / it works correctly. That is the opposite of what it works for using url() from the stylesheet. In that case, the asset must have a leading /.

Below are the Cypress dev server logs for the requests in the application:

GET /assets/logo.svg 404 5.606 ms - -
GET /__cypress/src/assets/logo.svg 200 5.000 ms - -
GET /__cypress/src/logo.svg 200 7.885 ms - -
GET /__cypress/src/OpenSans-Regular.ttf 200 5.762 ms - -

• The first corresponds to the <img> tag with a src of /assets/logo.svg
• The second corresponds to the <img> tag with a src of assets/logo.svg
• The third and fourth are the ones loaded from the stylesheet (both use a leading /, otherwise they throw)

This is not a major issue. I don't think it's blocking anyone. The <img> tag source can be set to paths without a leading / as a workaround. It's inconsistent with how the paths need to be set in the stylesheets, and it might be inconvenient if folks have to change their project's source code to accommodate Cypress CT, though.

Note that the Angular application is correctly served with either path.

I updated the shared repo to showcase this as well. The branch https://github.com/leosvelperez/ng-cypress-ct-issue/tree/standard-assets-dir has the standard src/assets directory where it can be seen the stylesheets resolving the assets correctly, but the <img> tag with the leading / (the same path used in the stylesheets) doesn't work.