refactor(@angular/build): avoid need to pre-import angular compiler package in dev server

Within the development server, the external stylesheet encapsulation logic has been
adjusted to avoid needing to asynchronously import the `@angular/compiler` package within
the request execution. This removes the need to pre-import the package at the start of the
development server which was previously used to avoid a delay in stylesheet response on
first use. The external stylesheet response execution is also now fully synchronous.

Author: clydin

packages/angular/build/src/builders/dev-server/vite-server.ts

@@ -139,11 +139,6 @@ export async function* serveWithVite(
 
   // Enable to support component style hot reloading (`NG_HMR_CSTYLES=0` can be used to disable)
   browserOptions.externalRuntimeStyles = !!serverOptions.liveReload && useComponentStyleHmr;
-  if (browserOptions.externalRuntimeStyles) {
-    // Preload the @angular/compiler package to avoid first stylesheet request delays.
-    // Once @angular/build is native ESM, this should be re-evaluated.
-    void loadEsmModule('@angular/compiler');
-  }
 
   // Enable to support component template hot replacement (`NG_HMR_TEMPLATE=1` can be used to enable)
   browserOptions.templateUpdates = !!serverOptions.liveReload && useComponentTemplateHmr;

packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts

@@ -9,14 +9,14 @@
 import { lookup as lookupMimeType } from 'mrmime';
 import { extname } from 'node:path';
 import type { Connect, ViteDevServer } from 'vite';
-import { loadEsmModule } from '../../../utils/load-esm';
 import { AngularMemoryOutputFiles, pathnameWithoutBasePath } from '../utils';
 
 export function createAngularAssetsMiddleware(
   server: ViteDevServer,
   assets: Map<string, string>,
   outputFiles: AngularMemoryOutputFiles,
   usedComponentStyles: Map<string, Set<string>>,
+  encapsulateStyle: (style: Uint8Array, componentId: string) => string,
 ): Connect.NextHandleFunction {
   return function angularAssetsMiddleware(req, res, next) {
     if (req.url === undefined || res.writableEnded) {
@@ -73,7 +73,7 @@ export function createAngularAssetsMiddleware(
     if (extension !== '.js' && extension !== '.html') {
       const outputFile = outputFiles.get(pathname);
       if (outputFile?.servable) {
-        const data = outputFile.contents;
+        let data: Uint8Array | string = outputFile.contents;
         if (extension === '.css') {
           // Inject component ID for view encapsulation if requested
           const componentId = new URL(req.url, 'http://localhost').searchParams.get('ngcomp');
@@ -108,22 +108,15 @@ export function createAngularAssetsMiddleware(
                 return;
               }
 
-              loadEsmModule<typeof import('@angular/compiler')>('@angular/compiler')
-                .then((compilerModule) => {
-                  const encapsulatedData = compilerModule.encapsulateStyle(
-                    new TextDecoder().decode(data),
-                    componentId,
-                  );
+              data = encapsulateStyle(data, componentId);
+            }
 
-                  res.setHeader('Content-Type', 'text/css');
-                  res.setHeader('Cache-Control', 'no-cache');
-                  res.setHeader('ETag', etag);
-                  res.end(encapsulatedData);
-                })
-                .catch((e) => next(e));
+            res.setHeader('Content-Type', 'text/css');
+            res.setHeader('Cache-Control', 'no-cache');
+            res.setHeader('ETag', etag);
+            res.end(data);
 
-              return;
-            }
+            return;
           }
         }
 

packages/angular/build/src/tools/vite/plugins/setup-middlewares-plugin.ts

@@ -7,6 +7,7 @@
  */
 
 import type { Connect, Plugin } from 'vite';
+import { loadEsmModule } from '../../../utils/load-esm';
 import {
   angularHtmlFallbackMiddleware,
   createAngularAssetsMiddleware,
@@ -53,13 +54,25 @@ interface AngularSetupMiddlewaresPluginOptions {
   ssrMode: ServerSsrMode;
 }
 
+async function createEncapsulateStyle(): Promise<
+  (style: Uint8Array, componentId: string) => string
+> {
+  const { encapsulateStyle } =
+    await loadEsmModule<typeof import('@angular/compiler')>('@angular/compiler');
+  const decoder = new TextDecoder('utf-8');
+
+  return (style, componentId) => {
+    return encapsulateStyle(decoder.decode(style), componentId);
+  };
+}
+
 export function createAngularSetupMiddlewaresPlugin(
   options: AngularSetupMiddlewaresPluginOptions,
 ): Plugin {
   return {
     name: 'vite:angular-setup-middlewares',
     enforce: 'pre',
-    configureServer(server) {
+    async configureServer(server) {
       const {
         indexHtmlTransformer,
         outputFiles,
@@ -74,7 +87,13 @@ export function createAngularSetupMiddlewaresPlugin(
       server.middlewares.use(createAngularHeadersMiddleware(server));
       server.middlewares.use(createAngularComponentMiddleware(templateUpdates));
       server.middlewares.use(
-        createAngularAssetsMiddleware(server, assets, outputFiles, usedComponentStyles),
+        createAngularAssetsMiddleware(
+          server,
+          assets,
+          outputFiles,
+          usedComponentStyles,
+          await createEncapsulateStyle(),
+        ),
       );
 
       extensionMiddleware?.forEach((middleware) => server.middlewares.use(middleware));