CSS background-image: url() not working for relative paths in Angular library project

[saravana-sk]

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

No response

Description

CSS containing background-image: url('^./assets/images/bg.svg') failing to build on a Library project in angular17

Minimal Reproduction

Using relative path with caret (^) in background: url()**** in component style.scss file does not working on a library project in angular17. Whereas it is working in an application project while building it.

Exception or Error

⠇ Compiling with Angular sources in Ivy partial compilation mode.X [ERROR] Could not resolve "^./fix/images/icons/Success.svg" [plugin angular-css-resource]

    <stdin>:53:24:
      53 │   background-image: url("^./fix/images/icons/Success.svg");
         ╵                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can remove the caret and add the path to the `externalDependencies` build option, which should
  remove this error.
  Preprocessor stylesheets may not show the exact file location of the error.

✖ Compiling with Angular sources in Ivy partial compilation mode.
Build failed with 1 error:
<stdin>:53:24: ERROR: [plugin: angular-css-resource] Could not resolve "^./fix/images/icons/Success.svg"

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 17.2.2
Node: 20.11.0
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 17.2.3
... animations, common, compiler, core, forms, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1702.2
@angular-devkit/build-angular   17.2.2
@angular-devkit/core            17.2.2
@angular-devkit/schematics      17.2.2
@angular/cli                    17.2.2
@angular/compiler-cli           17.3.1
@angular/localize               17.3.1
@schematics/angular             17.2.2
ng-packagr                      17.2.1
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.4

Anything else relevant?

No response

[JoostK]

Using ^ is a non-standard resolution mode and can no longer be used with Angular. It was never really supported but happened to work in the underlying tools being used, but now that libraries are being built with esbuild this is no longer the case. There has been an automated migration (#27170) to account for them in import/@use statements, but not url usages. Please see https://github.com/angular/angular-cli/issues/27239#issuecomment-2007313201 for a potential direction to follow.

[angular-automatic-lock-bot[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.}