Skip to content

@angular/build:unit-test requires absolute paths #30440

Open
@wein2011

Description

@wein2011

Command

build

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

@angular/build:karma

Description

Migration from Karma (@angular/build:karma) to Vitest (@angular/build:unit-test) test runner requires changes to paths in application code.

Specifically, Vitest requires absolute paths while Karma allows relative paths.

The original application code works with Karma and includes relative paths like:

<img ngSrc="assets/image/help.svg">

This generated the following errors in the chromium browser after migration to Vitest:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:63315/__vitest_test__/__test__/assets/image/help.svg

The error is related to the additional path segment of:

__vitest_test__/__test__/

After changing the relative path to an absolute path like:

<img ngSrc="/assets/image/help.svg">

the chromium browser correctly loads the image from:

http://localhost:63315/assets/image/help.svg

A similar situation occurs when using MatIconRegistry. It also requires a change from a relative path

iconRegistry.addSvgIcon('help', sanitizer.bypassSecurityTrustResourceUrl('assets/image/help.svg'));

to an absolute path:

iconRegistry.addSvgIcon('help', sanitizer.bypassSecurityTrustResourceUrl('/assets/image/help.svg'));

To allow for a smooth migration process and not to require changes to the application code, it would be best if the Vitest test runner would default to not using the additional path segment or at least to provide a configuration option.

Minimal Reproduction

  1. Create src/assets/image/help.svg
  2. Change angular.json to include architect.build.options.assets: ["src/assets"]
  3. Add
    <img ngSrc="assets/image/help.svg">

Exception or Error


Your Environment

Angular CLI: 20.0.0
Node: 22.16.0
Package Manager: npm 10.9.2
OS: win32 x64

Angular: 20.0.0
... animations, build, cli, common, compiler, compiler-cli, core
... forms, language-service, platform-browser
... platform-browser-dynamic, router

Package                              Version
--------------------------------------------------------------
@angular-devkit/architect            0.2000.0
@angular-devkit/core                 20.0.0
@angular-devkit/schematics           20.0.0
@angular/cdk                         20.0.1
@angular/material                    20.0.1
@angular/material-date-fns-adapter   20.0.1
@schematics/angular                  20.0.0
rxjs                                 7.8.2
typescript                           5.8.3

Anything else relevant?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions