fix(@angular-devkit/build-angular): return 404 for assets that are not found

This commit updates the vite dev-server to return 404 for assets and files that are not found.

Closes angular#26917

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/dev-server/tests/behavior/build-assets_spec.ts

@@ -55,5 +55,23 @@ describeServeBuilder(executeDevServer, DEV_SERVER_BUILDER_INFO, (harness, setupT
       expect(result?.success).toBeTrue();
       expect(await response?.text()).toContain(javascriptFileContent);
     });
+
+    it('should return 404 for non existing assets', async () => {
+      setupTarget(harness, {
+        assets: ['src/extra.js'],
+        optimization: {
+          scripts: true,
+        },
+      });
+
+      harness.useTarget('serve', {
+        ...BASE_OPTIONS,
+      });
+
+      const { result, response } = await executeOnceAndFetch(harness, 'extra.js');
+
+      expect(result?.success).toBeTrue();
+      expect(await response?.status).toBe(404);
+    });
   });
 });

packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts

@@ -462,7 +462,7 @@ export async function setupServer(
     publicDir: false,
     esbuild: false,
     mode: 'development',
-    appType: 'spa',
+    appType: 'mpa',
     css: {
       devSourcemap: true,
     },

packages/angular_devkit/build_angular/src/tools/vite/angular-memory-plugin.ts

@@ -90,6 +90,7 @@ export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions):
         map: mapContents && Buffer.from(mapContents).toString('utf-8'),
       };
     },
+    // eslint-disable-next-line max-lines-per-function
     configureServer(server) {
       const originalssrTransform = server.ssrTransform;
       server.ssrTransform = async (code, map, url, originalCode) => {
@@ -122,6 +123,11 @@ export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions):
         // The base of the URL is unused but required to parse the URL.
         const pathname = pathnameWithoutBasePath(req.url, server.config.base);
         const extension = extname(pathname);
+        if (!extension) {
+          next();
+
+          return;
+        }
 
         // Rewrite all build assets to a vite raw fs URL
         const assetSourcePath = assets.get(pathname);
@@ -169,6 +175,8 @@ export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions):
       // Returning a function, installs middleware after the main transform middleware but
       // before the built-in HTML middleware
       return () => {
+        server.middlewares.use(angularHtmlFallbackMiddleware);
+
         function angularSSRMiddleware(
           req: Connect.IncomingMessage,
           res: ServerResponse,
@@ -180,8 +188,8 @@ export function createAngularMemoryPlugin(options: AngularMemoryPluginOptions):
             // Skip if path is not defined.
             !url ||
             // Skip if path is like a file.
-            // NOTE: We use a regexp to mitigate against matching requests like: /browse/pl.0ef59752c0cd457dbf1391f08cbd936f
-            /^\.[a-z]{2,4}$/i.test(extname(url.split('?')[0]))
+            // NOTE: We use a mime type lookup to mitigate against matching requests like: /browse/pl.0ef59752c0cd457dbf1391f08cbd936f
+            lookupMimeTypeFromRequest(url)
           ) {
             next();
 
@@ -306,3 +314,42 @@ function pathnameWithoutBasePath(url: string, basePath: string): string {
     ? pathname.slice(basePath.length - 1)
     : pathname;
 }
+
+function angularHtmlFallbackMiddleware(
+  req: Connect.IncomingMessage,
+  res: ServerResponse,
+  next: Connect.NextFunction,
+): void {
+  // Similar to how it is handled in vite
+  // https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/middlewares/htmlFallback.ts#L15C19-L15C45
+  if (
+    // Only accept GET or HEAD
+    (req.method !== 'GET' && req.method !== 'HEAD') ||
+    // Has file extensions
+    (req.url && lookupMimeTypeFromRequest(req.url)) ||
+    // Require Accept: text/html or */*
+    !(
+      req.headers.accept === undefined || // equivalent to `Accept: */*`
+      req.headers.accept === '' || // equivalent to `Accept: */*`
+      req.headers.accept.includes('text/html') ||
+      req.headers.accept.includes('*/*')
+    )
+  ) {
+    next();
+
+    return;
+  }
+
+  req.url = '/index.html';
+  next();
+}
+
+function lookupMimeTypeFromRequest(url: string): string | undefined {
+  const extension = extname(url.split('?')[0]);
+
+  if (extension === '.ico') {
+    return 'image/x-icon';
+  }
+
+  return extension && lookupMimeType(extension);
+}