Angular项目Cypress组件测试中图标资源无法解析的解决方法

在Angular应用中，header.scss包含如下代码：

.settings-icon {
  @include header-widget-top-icon('/static/0/images/app/settings_icon.svg')
}

运行Cypress组件测试时，出现资源解析错误：

ERROR in ./app/my-page.component.scss?ngResource
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
/Users/john/ui/web/src/main/static/css/common/header.scss:11:2: Can't resolve '../../../../0/images/app/settings_icon.svg' in '/Users/john/ui/web/src/main/static/app/my-page'

相关配置片段 #

angular.json

...
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": [
              "angular-csv-ext/dist/Angular-csv",
              "lodash",
              "highcharts/highstock",
              "moment",
              "moment-timezone",
              "zone.js/dist/zone-error"
            ],
            "outputPath": "../webapp/static/0",
            "preserveSymlinks": true,
            "index": "index.html",
            "deployUrl": "/static/0/",
...

cypress.config.ts

component: {
        viewportWidth: 1280,
        viewportHeight: 720,
        supportFile: 'cypress/support/component.ts',
        indexHtmlFile: 'cypress/support/component-index.html',
        devServer: {
            framework: 'angular',
            bundler: 'webpack',
            options: {
                projectConfig: {
                    root: '',
                    sourceRoot: 'app',
                    buildOptions: {
                        tsConfig: 'cypress/tsconfig-component.json',
                        inlineStyleLanguage: 'scss',
                        styles: [
                            'node_modules/common-ui-lib/styles/common/globals.scss',
                            'node_modules/tippy.js/dist/tippy.css',
                            'css/jsp/_lib/bootstrap.scss',
                            'css/jsp/_lib/framework.scss',
                        ],
                        scripts: [
                            'node_modules/jquery/dist/jquery.min.js',
                            'node_modules/bootstrap/dist/js/bootstrap.min.js',
                        ],
                        sourceMap: true,
                        namedChunks: true,
                    },
                },
            },
        },
        specPattern: 'cypress/tests-component/**/*component.cy.ts',
    },

需求 #

修复Can't resolve '../../../../0/images/app/settings_icon.svg'错误及其他类似资源找不到的问题。

1. 配置Webpack别名映射静态资源路径 #

在cypress.config.ts的devServer.options中添加Webpack别名，将绝对路径/static/0/映射到本地实际资源目录：

// 先引入path模块
import * as path from 'path';

// 找到component.devServer.options部分，添加webpackConfig
component: {
  // 原有配置...
  devServer: {
    framework: 'angular',
    bundler: 'webpack',
    options: {
      projectConfig: {
        // 原有projectConfig内容...
      },
      webpackConfig: {
        resolve: {
          alias: {
            '/static/0/': path.resolve(__dirname, './src/main/static/0/')
          }
        }
      }
    },
  },
}

此方案让Webpack在解析SCSS中的绝对路径时，直接指向本地资源目录，避免路径解析错误。

2. 为Cypress配置资源目录 #

在cypress.config.ts的projectConfig.buildOptions中添加assets字段，指定需要复制的资源目录，确保Cypress构建时能正确识别并处理这些资源：

buildOptions: {
  // 原有配置...
  assets: [
    'src/main/static/0/images',
    'src/main/static/0/fonts', // 如有其他资源类型，按需添加
    'src/main/static/0/icons'
  ]
}

3. 调整SCSS中的相对路径（备选） #

如果上述配置无效，可以将SCSS中的绝对路径改为相对于当前文件的相对路径。比如header.scss位于src/main/static/css/common/，则资源路径应改为：

.settings-icon {
  @include header-widget-top-icon('../../0/images/app/settings_icon.svg')
}

此方案需要逐个修改资源引用，适合资源较少的场景，优先推荐前两种配置方案。

4. 更新Cypress的TS配置 #

检查cypress/tsconfig-component.json，确保资源目录被包含在include中，避免TS解析时忽略资源文件：

{
  "extends": "../tsconfig.json",
  "include": [
    "**/*.ts",
    "../src/main/static/0/**/*"
  ]
}

内容的提问来源于stack exchange，提问作者Hasan