fix(@angular-devkit/build-angular): correctly load dev server assets …

…with vite 4.4.0+

The underlying development server (Vite) for the application build system updated
its static file serving dependencies which resulted in the `@fs` special file URLs
supported by Vite to have a different format.  Previously, the paths were encoded
using `encodeURIComponent` but are now use `encodeURI`. The development server
integration with Vite will now use the matching encoding to allow build defined
assets to be correctly served.

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

@@ -286,7 +286,9 @@ export async function setupServer(
             // Rewrite all build assets to a vite raw fs URL
             const assetSourcePath = assets.get(pathname);
             if (assetSourcePath !== undefined) {
-              req.url = `/@fs/${encodeURIComponent(assetSourcePath)}`;
+              // The encoding needs to match what happens in the vite static middleware.
+              // ref: https://github.com/vitejs/vite/blob/d4f13bd81468961c8c926438e815ab6b1c82735e/packages/vite/src/node/server/middlewares/static.ts#L163
+              req.url = `/@fs/${encodeURI(assetSourcePath)}`;
               next();
 
               return;

tests/legacy-cli/e2e/tests/basic/serve.ts

@@ -18,9 +18,15 @@ export default async function () {
 }
 
 async function verifyResponse(port: number): Promise<void> {
-  const response = await fetch(`http://localhost:${port}/`);
+  const indexResponse = await fetch(`http://localhost:${port}/`);
 
-  if (!/<app-root><\/app-root>/.test(await response.text())) {
+  if (!/<app-root><\/app-root>/.test(await indexResponse.text())) {
     throw new Error('Response does not match expected value.');
   }
+
+  const assetResponse = await fetch(`http://localhost:${port}/favicon.ico`);
+
+  if (!assetResponse.ok) {
+    throw new Error('Expected favicon asset to be available.');
+  }
 }