refactor(@angular/build): send error status code on invalid external style component ID

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');
@@ -98,27 +98,25 @@ export function createAngularAssetsMiddleware(
             // Shim the stylesheet if a component ID is provided
             if (componentId.length > 0) {
               // Validate component ID
-              if (/^[_.\-\p{Letter}\d]+-c\d+$/u.test(componentId)) {
-                loadEsmModule<typeof import('@angular/compiler')>('@angular/compiler')
-                  .then((compilerModule) => {
-                    const encapsulatedData = compilerModule.encapsulateStyle(
-                      new TextDecoder().decode(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));
+              if (!/^[_.\-\p{Letter}\d]+-c\d+$/u.test(componentId)) {
+                const message = 'Invalid component stylesheet ID request: ' + componentId;
+                // eslint-disable-next-line no-console
+                console.error(message);
+                res.statusCode = 400;
+                res.end(message);
 
                 return;
-              } else {
-                // eslint-disable-next-line no-console
-                console.error('Invalid component stylesheet ID request: ' + componentId);
               }
+
+              data = encapsulateStyle(data, componentId);
             }
+
+            res.setHeader('Content-Type', 'text/css');
+            res.setHeader('Cache-Control', 'no-cache');
+            res.setHeader('ETag', etag);
+            res.end(data);
+
+            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));