refactor(@angular-devkit/build-angular): convert into a function to give more control when the readable stream is initialized

(cherry picked from commit 65f78be)

Author: d3lm

packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html.ts

@@ -183,7 +183,7 @@ export async function augmentIndexHtml(
       rewriter.emitEndTag(tag);
     });
 
-  const content = await transformedContent;
+  const content = await transformedContent();
 
   return {
     content:

packages/angular_devkit/build_angular/src/utils/index-file/html-rewriting-stream.ts

@@ -10,36 +10,44 @@ import { Readable, Writable } from 'stream';
 
 export async function htmlRewritingStream(content: string): Promise<{
   rewriter: import('parse5-html-rewriting-stream');
-  transformedContent: Promise<string>;
+  transformedContent: () => Promise<string>;
 }> {
   const chunks: Buffer[] = [];
   const rewriter = new (await import('parse5-html-rewriting-stream')).default();
 
   return {
     rewriter,
-    transformedContent: new Promise((resolve) => {
-      new Readable({
-        encoding: 'utf8',
-        read(): void {
-          this.push(Buffer.from(content));
-          this.push(null);
-        },
-      })
-        .pipe(rewriter)
-        .pipe(
-          new Writable({
-            write(chunk: string | Buffer, encoding: string | undefined, callback: Function): void {
-              chunks.push(
-                typeof chunk === 'string' ? Buffer.from(chunk, encoding as BufferEncoding) : chunk,
-              );
-              callback();
-            },
-            final(callback: (error?: Error) => void): void {
-              callback();
-              resolve(Buffer.concat(chunks).toString());
-            },
-          }),
-        );
-    }),
+    transformedContent: () => {
+      return new Promise((resolve) => {
+        new Readable({
+          encoding: 'utf8',
+          read(): void {
+            this.push(Buffer.from(content));
+            this.push(null);
+          },
+        })
+          .pipe(rewriter)
+          .pipe(
+            new Writable({
+              write(
+                chunk: string | Buffer,
+                encoding: string | undefined,
+                callback: Function,
+              ): void {
+                chunks.push(
+                  typeof chunk === 'string'
+                    ? Buffer.from(chunk, encoding as BufferEncoding)
+                    : chunk,
+                );
+                callback();
+              },
+              final(callback: (error?: Error) => void): void {
+                callback();
+                resolve(Buffer.concat(chunks).toString());
+              },
+            }),
+          );
+      });
+    },
   };
 }

packages/angular_devkit/build_angular/src/utils/index-file/inline-fonts.ts

@@ -48,7 +48,8 @@ export class InlineFontsProcessor {
     const existingPreconnect = new Set<string>();
 
     // Collector link tags with href
-    const { rewriter: collectorStream } = await htmlRewritingStream(content);
+    const { rewriter: collectorStream, transformedContent: initCollectorStream } =
+      await htmlRewritingStream(content);
 
     collectorStream.on('startTag', (tag) => {
       const { tagName, attrs } = tag;
@@ -88,6 +89,11 @@ export class InlineFontsProcessor {
       }
     });
 
+    initCollectorStream().catch(() => {
+      // We don't really care about any errors here because it just initializes
+      // the rewriting stream, as we are waiting for `finish` below.
+    });
+
     await new Promise((resolve) => collectorStream.on('finish', resolve));
 
     // Download stylesheets
@@ -151,7 +157,7 @@ export class InlineFontsProcessor {
       }
     });
 
-    return transformedContent;
+    return transformedContent();
   }
 
   private async getResponse(url: URL): Promise<string> {