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

Author: Angular Builds

package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.1.1+sha-e880531",
+  "version": "17.1.1+sha-3deb0d4",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.1",
-    "@angular-devkit/architect": "github:angular/angular-devkit-architect-builds#e880531",
-    "@angular-devkit/build-webpack": "github:angular/angular-devkit-build-webpack-builds#e880531",
-    "@angular-devkit/core": "github:angular/angular-devkit-core-builds#e880531",
+    "@angular-devkit/architect": "github:angular/angular-devkit-architect-builds#3deb0d4",
+    "@angular-devkit/build-webpack": "github:angular/angular-devkit-build-webpack-builds#3deb0d4",
+    "@angular-devkit/core": "github:angular/angular-devkit-core-builds#3deb0d4",
     "@babel/core": "7.23.7",
     "@babel/generator": "7.23.6",
     "@babel/helper-annotate-as-pure": "7.22.5",
@@ -20,7 +20,7 @@
     "@babel/preset-env": "7.23.7",
     "@babel/runtime": "7.23.7",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "github:angular/ngtools-webpack-builds#e880531",
+    "@ngtools/webpack": "github:angular/ngtools-webpack-builds#3deb0d4",
     "@vitejs/plugin-basic-ssl": "1.0.2",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.16",

src/builders/dev-server/vite-server.js

@@ -341,7 +341,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
         publicDir: false,
         esbuild: false,
         mode: 'development',
-        appType: 'spa',
+        appType: 'mpa',
         css: {
             devSourcemap: true,
         },

src/tools/vite/angular-memory-plugin.js

@@ -61,6 +61,7 @@ function createAngularMemoryPlugin(options) {
                 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) => {
@@ -124,14 +125,15 @@ function createAngularMemoryPlugin(options) {
             // 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, res, next) {
                     const url = req.originalUrl;
                     if (!req.url ||
                         // 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((0, node_path_1.extname)(url.split('?')[0]))) {
+                        // NOTE: We use a mime type lookup to mitigate against matching requests like: /browse/pl.0ef59752c0cd457dbf1391f08cbd936f
+                        lookupMimeTypeFromRequest(url)) {
                         next();
                         return;
                     }
@@ -227,3 +229,23 @@ function pathnameWithoutBasePath(url, basePath) {
         ? pathname.slice(basePath.length - 1)
         : pathname;
 }
+function angularHtmlFallbackMiddleware(req, res, next) {
+    // 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 ((req.method === 'GET' || req.method === 'HEAD') &&
+        (!req.url || !lookupMimeTypeFromRequest(req.url)) &&
+        (!req.headers.accept ||
+            req.headers.accept.includes('text/html') ||
+            req.headers.accept.includes('text/*') ||
+            req.headers.accept.includes('*/*'))) {
+        req.url = '/index.html';
+    }
+    next();
+}
+function lookupMimeTypeFromRequest(url) {
+    const extension = (0, node_path_1.extname)(url.split('?')[0]);
+    if (extension === '.ico') {
+        return 'image/x-icon';
+    }
+    return extension && (0, mrmime_1.lookup)(extension);
+}

uniqueId

@@ -1 +1 @@
-Wed Jan 24 2024 15:20:44 GMT+0000 (Coordinated Universal Time)
+Wed Jan 24 2024 17:58:49 GMT+0000 (Coordinated Universal Time)