diff --git a/packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts b/packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts
index 30f20fd2f4d7..e1c4db401bb2 100644
--- a/packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts
+++ b/packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts
@@ -78,13 +78,6 @@ 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) {
@@ -92,6 +85,16 @@ export function createAngularAssetsMiddleware(
             } 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