Angular-cli: data uri image is broken in AOT mode using @ngtools/webpack

[gitawego]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

ngtools/webpack @1.8.0
angular 5

Repro steps.

use styleUrls to include a scss file, and in this file, reference to an image like this

.logo {
  background: url('./logo.png') #fff no-repeat;

}

in webpack, configure url-loader for scss, and put parameter limit bigger than logo file size in order to convert logo to data uri format.

start up webpack build in AOT mode, the logo in data uri format is broken, in fact, even using file-loader, the image is broken as well.

The log given by the failure.

Desired functionality.

in angular 4, the image works normally.

Mention any other details that might be useful.

[gmanio]

same here. How soon do they normally fix these sort of bugs?

[changLiuUNSW]

Same here

[changLiuUNSW]

Image before AOT:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHUAAABACAYAAAAksziiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4Njg5ZWUzMy1kMTQyLTQyZDctOTI2YS1iZGI2M2QzMGY5NzgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUFDOTlEQkFDNjQ2MTFFNUIzMEVDN0Y1MkJFNTg4QzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUFDOTlEQjlDNjQ2MTFFNUIzMEVDN0Y1MkJFNTg4QzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Njg5ZWUzMy1kMTQyLTQyZDctOTI2YS1iZGI2M2QzMGY5NzgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODY4OWVlMzMtZDE0Mi00MmQ3LTkyNmEtYmRiNjNkMzBmOTc4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

Image after AOT (broken)

data:image/png;base64,77+9UE5HDQoaCgAAAA1JSERSAAAAIAAAACAIBgAAAHN6eu+/vQAAAAFzUkdCAO+/ve+/vRzvv70AAADvv71JREFUWAnvv73vv73vv70K77+9MAhFV++/vXlF77+9Gu+/vX/vv70e77+9MO+/ve+/vWwY77+977+9DO+/ve+/ve+/vSMu77+977+977+9CXRS77+9ee+/vXbvv73vv71777+9bO+/vSVf77+9De+/vX0/77+9AO+/vWJ077+9zofvv71+77+9AFXvv70q77+9O9KuIRhO77+9Ce+/vVNAfe+/ve+/ve+/ve+/vVrvv73vv70CFe+/vTzvv73vv71R77+92qgtKgEoQBUf77+90JsE77+9Cyfvv70S77+9K++/vdqI77+9SgAK77+977+9Pe+/ve+/ve+/ve+/ve+/vW3vv73vv71wAioBb++/ve+/ve+/vVEJ77+977+977+927xib0IUL++/vQDvv73vv73vv73vv71bfe+/vX0477+977+977+977+977+9P++/vQMi77+9T++/vTspMB0AAAAASUVORO+/vUJg77+9

Copy above image uri to the browser and you will find difference.

@filipesilva This issue blocked us from upgrading to angular 5 !

[dominikhb]

I have the same issue. My work around was to set --extract-css=false
Example: ng build --prod --extract-css=false
So it had nothing to do with the aot, but with whatever happens when extract css is active.

Since I upgraded to Angular 5 and cli 1.5, it also breaks every second font file in the dist folder, which leads to unparseable fonts in the browser. --extract-css=false solved that, too.

[changLiuUNSW]

Another workaround is to use root path / to prevent images from translating by css-loader
https://github.com/webpack-contrib/css-loader#root
For example:
Change

.logo {
  background: url('./logo.png') #fff no-repeat;
}

to

.logo {
  background: url('/logo.png') #fff no-repeat;
}

Anyway, I believe this issue is introduced from CLI 1.5, because I cannot replicate it in CLI 1.4.x

[Maikar]

I started to encounter this after upgrading to Angular 5 and CLI 1.5, although my problem wasn't with embedded images. The images that were moved to the dist folder would each have a correct image and a broken image, but all the CSS would reference the image that was broken.

The --extract-css=false workaround did not work for me.

Updating my references to the images to use the root path / was the fix for me as posted by @changLiuUNSW

[filipesilva]

@hansl @clydin this might be related to the postcss update https://github.com/angular/angular-cli/pull/8535

[clydin]

This should be corrected in 1.6.3. If this problem is still occurring, please re-open the issue.

[johanberonius]

I had this problem too. It was solved when updating @angular/cli from 1.5.5 to 1.7.3.

[AkatQuas]

Same issue here.

Angular CLI: 7.1.4

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