absolute imageurls in stylesheets incompatible with @angular/localize

[StefanKern]

Command

build, other

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

No response

Description

If angular is used with "@angular/localize" and two languages, the build is split into "en" and "de". Now if a image image is linked in a stylesheet with an absolute url (e.g. "background-image: url('/https/github.com/assets/1.jpg');", this works in development, but once the application is deployed, the image is not found because the assets folder is not located in the root directory.

Not using a "/" at the beginning, causes the following error

X [ERROR] Could not resolve "assets/1.jpg" [plugin angular-css-resource]

    src/app/pages/startpage/intro/intro.component.scss:11:24:
      11 │   background-image: url("assets/1.jpg");
         ╵                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "assets/intro/intro-minimal.jpg" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.
  Preprocessor stylesheets may not show the exact file location of the error.

Using a "~", or "./", etc causes similar build issues. Using relative paths is it's own can of worms and also does not work out of the box...

Minimal Reproduction

.sample-class {
background-image: url('/https/github.com/assets/1.jpg');
]

Exception or Error

404 Image not found in production builds

Your Environment

Angular CLI: 19.2.5
Node: 22.14.0
Package Manager: npm 10.8.1
OS: win32 x64

Angular: 19.2.3
... common, compiler, compiler-cli, core, forms, *localize*
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.5
@angular-devkit/build-angular   19.2.5
@angular-devkit/core            19.2.5
@angular-devkit/schematics      19.2.5
@angular/cdk                    19.2.7
@angular/cli                    19.2.5
@angular/material               19.2.7
@angular/ssr                    19.2.5
@schematics/angular             19.2.5
rxjs                            7.8.2
typescript                      5.7.3
zone.js                         0.15.0

Anything else relevant?

#26286
could resolve it.

[alan-agius4]

Absolute paths are not handled by the build system. Currently, there is no way to output assets directly to the root directory or maintain a single copy.

However, relative paths are supported, as files are fingerprinted (hashed) and copied for each locale and works out of the box. Can you please elaborate on what is the problem with relative paths?

[StefanKern]

Thank you for the fast replay.

In the past I made really bad experiences with relative paths, when it comes to refactoring, however I must say that the now this seems to be very nicely. As far as I read into it, it was just added with angular 17, so I kinda missed it but again, very nice :)

However that leaves the folder build structure i18n interacting very poorly with those absolute urls. So maybe revisit #26286

[alan-agius4]

Thanks for the additional info, in that case let's keep tracking this in #26286

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}