Angular: Using base-href in combination with scss urls

Question

I'm trying to deploy my Angular app to a server with a subdomain: website.com/magazine/. So to this I'm running the angular-cli command

ng build --prod --base-href=/magazine/

My images are in src/assets/images folder. When I do this:

background-image:url('./assets/images/.....')

the images I refer to via background-image in scss are not showing up because he's trying to fetch the images from website.com/assets/...., ignoring the subdomain.

When I do this (say in sr/app/components/component/component.scss):

background-image: url('../../../assets/images/...')

It works, but the images are stored in the root of the dist folder, which I don't want.

When i do this:

background-image:url('~/assets/images/...');

or this

background-image:url('./assets/images/...');

I get an error

NonErrorEmittedError: (Emitted value instead of an instance of Error)

What I want is that I can refer to the images and keep my relative images path in tact. How do I accomplish this?

I'm using Angular 11 and angular cli 11.1.4

Answer 1

Besides Patronaut solutions, there is another one to use relative path and to ignore it in externalDependencies

Angular 18:

• css:

body {
  background-image: url('images/bg.svg');
}

• angular.json

{
  ...
  "assets": [
    {
      "glob": "**/*",
      "input": "projects/app/public"
    }
  ],
  "externalDependencies": ["images/*"],
  ...
}

for Angular versions lower than 18, it can be used with assets in front of the path