fix(@angular/build): always record component style usage for HMR updates

When using the development server with the application builder, external
component stylesheet usage must always be record to ensure that any hot
replacement actions correctly reference the relevant components. Previously,
browser cached styles would return a 304 status prior to recording the usage.
This resulted in the development server not knowing that the component needed
a potential update in the future.

Author: clydin

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

@@ -78,20 +78,23 @@ export function createAngularAssetsMiddleware(
           // Inject component ID for view encapsulation if requested
           const componentId = new URL(req.url, 'http://localhost').searchParams.get('ngcomp');
           if (componentId !== null) {
-            const etag = `W/"${outputFile.contents.byteLength}-${outputFile.hash}-${componentId}"`;
-            if (req.headers['if-none-match'] === etag) {
-              res.statusCode = 304;
-              res.end();
-
-              return;
-            }
             // Record the component style usage for HMR updates
             const usedIds = usedComponentStyles.get(pathname);
             if (usedIds === undefined) {
               usedComponentStyles.set(pathname, new Set([componentId]));
             } else {
               usedIds.add(componentId);
             }
+
+            // Report if there are no changes to avoid reprocessing
+            const etag = `W/"${outputFile.contents.byteLength}-${outputFile.hash}-${componentId}"`;
+            if (req.headers['if-none-match'] === etag) {
+              res.statusCode = 304;
+              res.end();
+
+              return;
+            }
+
             // Shim the stylesheet if a component ID is provided
             if (componentId.length > 0) {
               // Validate component ID