ng build base-href issue (angular cli 8)

[Mek89]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, works with angular: 7.2.0

Description

The base-href flag works differently in angular 8. I hope you can help.

In angular 7:
ng build --prod app1 --base-href /app1/

after the command all my relative path in the scss are changed to the proper one.
source:
.example { background: url('/assets/img/picture.png') no-repeat center center; }
deployed:
.example { background: url('/app1/assets/img/picture.png') no-repeat center center; }

With angular 8 nothing happen:
source:
.example { background: url('/assets/img/picture.png') no-repeat center center; }
deployed:
.example { background: url('/assets/img/picture.png') no-repeat center center; }

🔬 Minimal Reproduction

-- get angular-cli 8.0.0 and create a new app (with scss)

npm install -g @angular/cli
ng new my-dream-app

-- add a new class to the css (src/style.scss)
.example { background: url('/assets/img/picture.png') no-repeat center center; }

-- add a new class to a html file (src/app/app.compontent.html)
<div class="example" style="text-align:center">

-- run the build
ng build --prod --base-href /app1/

🔥 Exception or Error

no exception

🌍 Your Environment

Angular CLI: 8.0.0
Node: 10.16.0
OS: win32 x64
Angular: 8.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0
@angular-devkit/build-angular     0.800.0
@angular-devkit/build-optimizer   0.800.0
@angular-devkit/build-webpack     0.800.0
@angular-devkit/core              8.0.0
@angular-devkit/schematics        8.0.0
@ngtools/webpack                  8.0.0
@schematics/angular               8.0.0
@schematics/update                0.800.0
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?
no

[clydin]

This is actually expected behavior. The HTML base HREF is intended to be a runtime value used by the web browser and not a build time constant. The rebaseRootRelativeCssUrls browser builder option can be used to maintain existing behavior for 8.x.

The release notes provide more detail regarding this change:

Root relative URLs are a standardized method to reference a resource path from the root of a host. The previous behavior of the Angular CLI prevented this from occuring and resulted in an inability to reference stylesheet assets in this manner. The initial reason for this behavior is no longer present in the internal implementation of the Angular CLI. Therefore, this now unnecessary and non-standard behavior is being phased out. If an application currently relies on this behavior, a compatibility option rebaseRootRelativeCssUrls has been provided for the 8.x release cycle to facilitate transition away from this non-standard and limiting behavior. The recommended method to transition is to use relative paths within the source stylesheet. This allows the build system to process and generate a full URL for the asset.

[a616101]

I have the same problem.
Use Cli 8.0.1

[saury]

I have the same problem.
Use Cli 8.0.1

Add --rebase-root-relative-css-urls=true to your build script shall solve your problem for temp.

[Indreed]

So how should we create url paths to images that we want to keep in assets folder and use custom --base-href in the long run (Angular 8+)? From now on all images should be kept along with components? In my case in scss files:

url('../assets/images/example.jpg')

leads to CssSyntaxError - can't compile

url('/assets/images/example.jpg')

doesn't work after build because the resources are referenced to the root path of the url, not the one given in base-href or deploy-url

url('~src/assets/images/example.jpg')

works, however all images are copied from assets/images folder to the root folder of the build output, so I end up having two copies of each image on the server

[nfcf]

also interested in the answer to the above question.
I've tried url('assets/images/example.jpg') (without the trailing "/")
and it also makes a copy of each image to the root dist folder.