Allow relative from host path in asset url

[slavede]

Which @angular/* package(s) are relevant/related to the feature request?

@angular/core, but not 100% which package takes care of this parsing.

Description

Component's scss allow only this format of background:url

.logo {
    background: url(../../../../assets/img/logo.png) 50% 50% no-repeat;
}

It works fine when using is as an application, but if I build it as a library, it searches different location when used in other project (since it is relative from node_modules) and of course it's not found

If I use (and this would work inside standalone app and when used as an library since it uses relative from host path)

background: url(assets/img/logo.png)

I can't build it as I get an error:

Can't resolve './assets/img/logo.png'

Proposed solution

Allow imports like

background: url(assets/img/logo.png)

and don't search it relative from current position (./assets/img/logo.png), but just leave it as it is. If someone really wants relative from current position it should/can do ./assets/img/logo.

This way asset would be found when used as a standalone app and in case it's build like a library. Also, independently of host (e.g. 192.168.55.5/my/host would just append it to it)

Alternatives considered

Allow another type of url format which would explicitly say it's relative from host (or to not alter the url path)

[alan-agius4]

background: url(assets/img/logo.png) such as are allowed in libraries. Likely the error is caused because the library is being built as part of the application, in which case the error is expected.

Can you please provide a minimal reproduction?

[slavede]

That's right, I have an app that can be built as a standalone (but it has two projects in angular.json, on lib, other app), and it can be packed as a library and used elsewhere. The codebase is the same (only thing for library we are not including boostrap part of the app).

Now, why I wouldn't be able to use relative paths always (like the one you've put) that shouldn't be resolved.

[alan-agius4]

Building a library as part of the application is not a recommended as mentioned in https://angular.io/guide/creating-libraries#building-and-rebuilding-your-library.

However, what you could try is to set "externalDependencies": ["assets/*"] in your application builder.

[slavede]

Well actually, that would partially be what I wanted "...don't search it relative from current position (./assets/img/logo.png), but just leave it as it is....". That helped a lot, thanks!

Do you maybe know any other (potentially dangerous) side effect this may cause?

EDIT: Found it doesn't work with karma/tests then. Karma still tries to resolve it " Can't resolve './assets/img/logo.png'"

[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.}