Production build css url does not use data URI scheme

[petarnikolovski]

After upgrading to angular 7 (from angular 6) CSS urls are no longer having data URI in production build. All images on my site are broken when I deploy the app.

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Command (mark with an x)

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

Versions

Linux: Ubuntu 16.04
Node: v10.14.2
npm: 6.4.1

ng --version:

@angular-devkit/architect         0.11.0
@angular-devkit/build-angular     0.11.0
@angular-devkit/build-optimizer   0.11.0
@angular-devkit/build-webpack     0.11.0
@angular-devkit/core              7.1.0
@angular-devkit/schematics        7.1.3
@angular/cdk                      7.2.0
@angular/cli                      7.1.3
@angular/material                 7.2.0
@ngtools/webpack                  7.1.0
@schematics/angular               7.1.3
@schematics/update                0.11.3
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Repro steps

I define my css image urls as e.g.

.resize {
  background-image: url("../../assets/symbol.png");
}

And after ng build --prod

The url on my live server is rendered as:

.resize {
  background-image: url("data:image/png;base64...");
}

However, after the upgrade to angular 7, the url becomes:

.resize {
  background-image: url("symbol.png");
}

The log given by the failure

No log.

Desired functionality

I want to be able to use data URI instead of relative/absolute url, when production build is compiled.

Mention any other details that might be useful

• My base href is set to "/" in all config files - I musn't change it because it would break all my API calls
• Probably unrelated, but since the upgrade when I try to create new component, I get Two or more projects are using identical roots. Unable to determine project using current working directory. Using default workspace project instead. warning

[alan-agius4]

Hi, thanks for reporting this, however this is the indented behaviour in version 7.

This is due CSS resources under 10kb are no longer inlined. There are several reasons behind this decision.

1. is bad for repeat visits
2. is bad for performance (e.g. delays parsing of the rest of the resource where the inlining is happening)
3. can lead to performance footguns (i.e. forgotten resources that are no longer needed, or inlining the > whole family when only one face is needed / critical)
4. makes font-display pointless (the font has been loaded regardless in all cases)
5. bloats the bytes count
6. increase usage of HTTP2

The resources now need to be available on the server. In case you have a baseHref of / these need to be located in the root of the web server.

See #12027

[petarnikolovski]

Thanks @alan-agius4. I suppose there's no flag to force data URI, as far as I've seen in the documentation. Unfortunately, I can't place it under root, since I'm deploying my app with django, and all my assets are under /static/ and not under /.

[alan-agius4]

Hi, nope there is no such feature, to enable certain resources to be inlined because this functionality in a lot of cases is a footgun.

That said, with Angular CLI 7.2.0-rc.0 you'd be able to specify the resourcesOutputPath which will output the css resources in a sub directory, which in your case might solve your issue.

See https://next.angular.io/cli/build

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