How to instruct Angular CLI to inline images

[GDreyV]

I found in issue #8945 that images inlining was competely disabled in Angular 7 by some reason.
How to enable it back? I have requirement to have everything in a single file so I obviously need to all svg images referenced in scss to be inlined (regardless there size). How can I do it?

[clydin]

There are a large variety of tools available to generate data URIs from an image. The URIs can then be inserted directly into the stylesheet.

With modern browsers (and HTTP/2 in particular), inlined images are generally more counterproductive than helpful.

[GDreyV]

Wow, already closed?
@clydin,I completely agree with you that HTTP/2 is awesome and it solves a lot of issues. But the most bleeding edge browsers is not the only usage for angular. Still there are a lot of other cases when more flexibility is required, e.g. intranet or like in my case extensions for electron applications where we have to bundle everything into single file.
Obviously just insert base64 into scss is not an option as we still have designers who just commit design files and ask them to encode images every time is a huge overhead.
You said that there are a lot of tools for bundling svg into scss. I war tying to bundle everything using ngx-build-plus and custom rules:
module: {
rules: [ { test: /.svg$/, use: "svg-inline-loader" } ]
}
But it doesn't do anything at all. Do you have more specific examples how to do it?

[clydin]

HTTP/2 is supported on IE11, Edge, Chrome 41+, Safari 9+, Firefox 36+. HTTP/2 does not require a "bleeding edge" browser. Intranet scenarios are also less in need of inlining as the request overhead is generally drastically reduced both in terms of network speed/latency and higher likelihood of caching. Inlined images also have additional concerns on mobile platforms wherein battery life and total data size is of importance. Processing inlined images is much more costly as they must first be converted back from their larger textual form into their original form before they can then be processed as normal.

While it is possible to build an Electron application with the Angular CLI, it is not currently an officially supported use case. However, if customizing the underlying Webpack configuration is the goal, then modifying the postcss-loader's plugins option with a custom plugin factory function that adds a postcss plugin to perform the inlining would most likely be the best option. Note that there are multiple rules containing the postcss-loader (one per stylesheet type). There's also the possibility that some custom builders might already have capabilities to easily do this.

[GDreyV]

@clydin, thans for the idea, can you share some example what exactly should be modified? The goal is to embed svg images :) In my case stylesheet type is scss. What postcss loader should be modified or added? The problem is that it's not easy to inject anything into angular build pipeline without breaking anything.

[GDreyV]

@clydin , could you please share more details about how it should work? What loaders should be added?

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