Add support for a data url file loader with application/esbuild builders

[imirkin]

Command

build

Description

This describes 4 loader schemes: text, binary, file, and empty.

My use-case is to switch up the contents of the favicon, which I do by updating the href of the relevant <link rel="icon">. This is simplest way to do that is with a data url (updating it with a real URL would cause it to have to be loaded separately, which works, but requires an extra request).

With the webpack loader, this is easily achieved with e.g. import favicon from "!!url-loader!favicon.ico"; which produces a string like data:image/x-icon;base64,.....

Describe the solution you'd like

Add a "data-url" (or "url" or "data") loader with the following import parameters:

• mime: string (defaults to mime type based on extension)
• plain: boolean (defaults to false, controls whether base64 is enabled)

So e.g. one could do import contents from 'foo.svg' with {loader: 'data-url', mime: 'foo/bar', plain: true}

Perhaps better names for the parameters could be found, e.g. the mime type isn't technically a mime type and can take additional parameters, e.g. text/plain;charset=utf-8 and so on.

Describe alternatives you've considered

Without this, the options seem to be to do this computation at runtime, e.g.:

• URL.createObjectURL(new Blob([uint8array], {type: mimetype}))
• "data:" + mimetype + ";base64," + btoa(uint8array).replace(/\+/g, '-').replace(/\//g, '_') (untested, but something like that should work)

This works, but why not have something in the framework that does the thing you want for you, and you don't have to do these fixups each time one wants to import such an asset.

[alan-agius4]

You can use the loader option to achieve the same thing.

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "loader": {
              ".ico": "text" // Can also be "binary", "file", "empty",
            }

[imirkin]

Does text provide a data URL? I'm familiar with the loader option, I was suggesting adding another option to the list.

[alan-agius4]

Sorry for misunderstanding this. You are right the text loader will not generate data url. See: https://esbuild.github.io/content-types/#text

[imirkin]

Makes sense that this would be tied to esbuild's internals. I see they have a dataurl and base64 loader as well. Any reason not to expose those as well? That would resolve my use case.

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.