feat(@angular/build): add dataurl, base64 loaders

packages/angular/build/src/builders/application/options.ts

@@ -206,13 +206,22 @@ export async function normalizeOptions(
     }
   }
 
-  let loaderExtensions: Record<string, 'text' | 'binary' | 'file'> | undefined;
+  let loaderExtensions:
+    | Record<string, 'text' | 'binary' | 'file' | 'dataurl' | 'base64'>
+    | undefined;
   if (options.loader) {
     for (const [extension, value] of Object.entries(options.loader)) {
       if (extension[0] !== '.' || /\.[cm]?[jt]sx?$/.test(extension)) {
         continue;
       }
-      if (value !== 'text' && value !== 'binary' && value !== 'file' && value !== 'empty') {
+      if (
+        value !== 'text' &&
+        value !== 'binary' &&
+        value !== 'file' &&
+        value !== 'dataurl' &&
+        value !== 'base64' &&
+        value !== 'empty'
+      ) {
         continue;
       }
       loaderExtensions ??= {};

packages/angular/build/src/builders/application/schema.json

@@ -279,10 +279,10 @@
       ]
     },
     "loader": {
-      "description": "Defines the type of loader to use with a specified file extension when used with a JavaScript `import`. `text` inlines the content as a string; `binary` inlines the content as a Uint8Array; `file` emits the file and provides the runtime location of the file; `empty` considers the content to be empty and not include it in bundles.",
+      "description": "Defines the type of loader to use with a specified file extension when used with a JavaScript `import`. `text` inlines the content as a string; `binary` inlines the content as a Uint8Array; `file` emits the file and provides the runtime location of the file; `dataurl` inlines the content as a data URL with best guess of MIME type; `base64` inlines the content as a Base64-encoded string; `empty` considers the content to be empty and not include it in bundles.",
       "type": "object",
       "patternProperties": {
-        "^\\.\\S+$": { "enum": ["text", "binary", "file", "empty"] }
+        "^\\.\\S+$": { "enum": ["text", "binary", "file", "dataurl", "base64", "empty"] }
       }
     },
     "define": {

packages/angular/build/src/builders/application/tests/behavior/loader-import-attribute_spec.ts

@@ -51,6 +51,41 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness.expectFile('dist/browser/main.js').content.not.toContain('ABC');
     });
 
+    it('should inline base64 content for file extension set to "base64"', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+      });
+
+      await harness.writeFile('./src/a.unknown', 'ABC');
+      await harness.writeFile(
+        'src/main.ts',
+        '// @ts-expect-error\nimport contents from "./a.unknown" with { loader: "base64" };\n console.log(contents);',
+      );
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBe(true);
+      // Should contain the base64 encoding used esbuild and not the text content
+      harness.expectFile('dist/browser/main.js').content.toContain('QUJD');
+      harness.expectFile('dist/browser/main.js').content.not.toContain('ABC');
+    });
+
+    it('should inline dataurl content for file extension set to "dataurl"', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+      });
+
+      await harness.writeFile('./src/a.svg', 'ABC');
+      await harness.writeFile(
+        'src/main.ts',
+        '// @ts-expect-error\nimport contents from "./a.svg" with { loader: "dataurl" };\n console.log(contents);',
+      );
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBe(true);
+      // Should contain the dataurl encoding used esbuild and not the text content
+      harness.expectFile('dist/browser/main.js').content.toContain('data:image/svg+xml,ABC');
+    });
+
     it('should emit an output file for loader attribute set to "file"', async () => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,

packages/angular/build/src/builders/application/tests/options/loader_spec.ts

@@ -108,6 +108,55 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness.expectFile('dist/browser/main.js').content.not.toContain('ABC');
     });
 
+    it('should inline base64 content for file extension set to "base64"', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        loader: {
+          '.unknown': 'base64',
+        },
+      });
+
+      await harness.writeFile(
+        './src/types.d.ts',
+        'declare module "*.unknown" { const content: string; export default content; }',
+      );
+      await harness.writeFile('./src/a.unknown', 'ABC');
+      await harness.writeFile(
+        'src/main.ts',
+        'import contents from "./a.unknown";\n console.log(contents);',
+      );
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBe(true);
+      // Should contain the base64 encoding used esbuild and not the text content
+      harness.expectFile('dist/browser/main.js').content.toContain('QUJD');
+      harness.expectFile('dist/browser/main.js').content.not.toContain('ABC');
+    });
+
+    it('should inline dataurl content for file extension set to "dataurl"', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        loader: {
+          '.svg': 'dataurl',
+        },
+      });
+
+      await harness.writeFile(
+        './src/types.d.ts',
+        'declare module "*.svg" { const content: string; export default content; }',
+      );
+      await harness.writeFile('./src/a.svg', 'ABC');
+      await harness.writeFile(
+        'src/main.ts',
+        'import contents from "./a.svg";\n console.log(contents);',
+      );
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBe(true);
+      // Should contain the dataurl encoding used esbuild and not the text content
+      harness.expectFile('dist/browser/main.js').content.toContain('data:image/svg+xml,ABC');
+    });
+
     it('should emit an output file for file extension set to "file"', async () => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,

packages/angular/build/src/builders/karma/schema.json

@@ -163,10 +163,10 @@
       "default": []
     },
     "loader": {
-      "description": "Defines the type of loader to use with a specified file extension when used with a JavaScript `import`. `text` inlines the content as a string; `binary` inlines the content as a Uint8Array; `file` emits the file and provides the runtime location of the file; `empty` considers the content to be empty and not include it in bundles.",
+      "description": "Defines the type of loader to use with a specified file extension when used with a JavaScript `import`. `text` inlines the content as a string; `binary` inlines the content as a Uint8Array; `file` emits the file and provides the runtime location of the file; `dataurl` inlines the content as a data URL with best guess of MIME type; `base64` inlines the content as a Base64-encoded string; `empty` considers the content to be empty and not include it in bundles.",
       "type": "object",
       "patternProperties": {
-        "^\\.\\S+$": { "enum": ["text", "binary", "file", "empty"] }
+        "^\\.\\S+$": { "enum": ["text", "binary", "file", "dataurl", "base64", "empty"] }
       }
     },
     "define": {

packages/angular/build/src/tools/esbuild/loader-import-attribute-plugin.ts

@@ -9,7 +9,7 @@
 import type { Loader, Plugin } from 'esbuild';
 import { readFile } from 'node:fs/promises';
 
-const SUPPORTED_LOADERS: Loader[] = ['binary', 'file', 'text'];
+const SUPPORTED_LOADERS: Loader[] = ['base64', 'binary', 'dataurl', 'file', 'text'];
 
 export function createLoaderImportAttributePlugin(): Plugin {
   return {