@angular-devkit/build-angular 17.1.0 → 17.1.2

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.1.0",
+  "version": "17.1.2",
   "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": "0.1701.0",
-    "@angular-devkit/build-webpack": "0.1701.0",
-    "@angular-devkit/core": "17.1.0",
+    "@angular-devkit/architect": "0.1701.2",
+    "@angular-devkit/build-webpack": "0.1701.2",
+    "@angular-devkit/core": "17.1.2",
     "@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": "17.1.0",
+    "@ngtools/webpack": "17.1.2",
     "@vitejs/plugin-basic-ssl": "1.0.2",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.16",
@@ -63,7 +63,7 @@
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
     "undici": "6.2.1",
-    "vite": "5.0.11",
+    "vite": "5.0.12",
     "watchpack": "2.4.0",
     "webpack": "5.89.0",
     "webpack-dev-middleware": "6.1.1",

package/src/builders/application/options.js

@@ -70,7 +70,7 @@ async function normalizeOptions(context, projectName, options, extensions) {
         server: 'server',
         media: 'media',
         ...(typeof outputPath === 'string' ? undefined : outputPath),
-        base: normalizeDirectoryPath(node_path_1.default.join(workspaceRoot, typeof outputPath === 'string' ? outputPath : outputPath.base)),
+        base: normalizeDirectoryPath(node_path_1.default.resolve(workspaceRoot, typeof outputPath === 'string' ? outputPath : outputPath.base)),
     };
     const outputNames = {
         bundles: options.outputHashing === schema_1.OutputHashing.All || options.outputHashing === schema_1.OutputHashing.Bundles

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

@@ -34,8 +34,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupServer = exports.serveWithVite = void 0;
-const remapping_1 = __importDefault(require("@ampproject/remapping"));
-const mrmime_1 = require("mrmime");
 const node_assert_1 = __importDefault(require("node:assert"));
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
@@ -43,10 +41,10 @@ const bundler_context_1 = require("../../tools/esbuild/bundler-context");
 const javascript_transformer_1 = require("../../tools/esbuild/javascript-transformer");
 const rxjs_esm_resolution_plugin_1 = require("../../tools/esbuild/rxjs-esm-resolution-plugin");
 const utils_1 = require("../../tools/esbuild/utils");
+const angular_memory_plugin_1 = require("../../tools/vite/angular-memory-plugin");
 const i18n_locale_plugin_1 = require("../../tools/vite/i18n-locale-plugin");
 const utils_2 = require("../../utils");
 const load_esm_1 = require("../../utils/load-esm");
-const render_page_1 = require("../../utils/server-rendering/render-page");
 const supported_browsers_1 = require("../../utils/supported-browsers");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const application_1 = require("../application");
@@ -324,7 +322,6 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
         }
     }
 }
-// eslint-disable-next-line max-lines-per-function
 async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
     const proxy = await (0, utils_2.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig, true);
     // dynamically import Vite for ESM compatibility
@@ -344,7 +341,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
         publicDir: false,
         esbuild: false,
         mode: 'development',
-        appType: 'spa',
+        appType: 'mpa',
         css: {
             devSourcemap: true,
         },
@@ -409,189 +406,18 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
         },
         plugins: [
             (0, i18n_locale_plugin_1.createAngularLocaleDataPlugin)(),
-            {
-                name: 'vite:angular-memory',
-                // Ensures plugin hooks run before built-in Vite hooks
-                enforce: 'pre',
-                async resolveId(source, importer) {
-                    // Prevent vite from resolving an explicit external dependency (`externalDependencies` option)
-                    if (externalMetadata.explicit.includes(source)) {
-                        // This is still not ideal since Vite will still transform the import specifier to
-                        // `/@id/${source}` but is currently closer to a raw external than a resolved file path.
-                        return source;
-                    }
-                    if (importer && source[0] === '.' && importer.startsWith(virtualProjectRoot)) {
-                        // Remove query if present
-                        const [importerFile] = importer.split('?', 1);
-                        source =
-                            '/' +
-                                normalizePath((0, node_path_1.join)((0, node_path_1.dirname)((0, node_path_1.relative)(virtualProjectRoot, importerFile)), source));
-                    }
-                    const [file] = source.split('?', 1);
-                    if (outputFiles.has(file)) {
-                        return (0, node_path_1.join)(virtualProjectRoot, source);
-                    }
-                },
-                load(id) {
-                    const [file] = id.split('?', 1);
-                    const relativeFile = '/' + normalizePath((0, node_path_1.relative)(virtualProjectRoot, file));
-                    const codeContents = outputFiles.get(relativeFile)?.contents;
-                    if (codeContents === undefined) {
-                        if (relativeFile.endsWith('/node_modules/vite/dist/client/client.mjs')) {
-                            return loadViteClientCode(file);
-                        }
-                        return;
-                    }
-                    const code = Buffer.from(codeContents).toString('utf-8');
-                    const mapContents = outputFiles.get(relativeFile + '.map')?.contents;
-                    return {
-                        // Remove source map URL comments from the code if a sourcemap is present.
-                        // Vite will inline and add an additional sourcemap URL for the sourcemap.
-                        code: mapContents ? code.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, '') : code,
-                        map: mapContents && Buffer.from(mapContents).toString('utf-8'),
-                    };
-                },
-                configureServer(server) {
-                    const originalssrTransform = server.ssrTransform;
-                    server.ssrTransform = async (code, map, url, originalCode) => {
-                        const result = await originalssrTransform(code, null, url, originalCode);
-                        if (!result || !result.map || !map) {
-                            return result;
-                        }
-                        const remappedMap = (0, remapping_1.default)([result.map, map], () => null);
-                        // Set the sourcemap root to the workspace root. This is needed since we set a virtual path as root.
-                        remappedMap.sourceRoot = normalizePath(serverOptions.workspaceRoot) + '/';
-                        return {
-                            ...result,
-                            map: remappedMap,
-                        };
-                    };
-                    // Assets and resources get handled first
-                    server.middlewares.use(function angularAssetsMiddleware(req, res, next) {
-                        if (req.url === undefined || res.writableEnded) {
-                            return;
-                        }
-                        // Parse the incoming request.
-                        // The base of the URL is unused but required to parse the URL.
-                        const pathname = pathnameWithoutBasePath(req.url, server.config.base);
-                        const extension = (0, node_path_1.extname)(pathname);
-                        // Rewrite all build assets to a vite raw fs URL
-                        const assetSourcePath = assets.get(pathname);
-                        if (assetSourcePath !== undefined) {
-                            // Workaround to disable Vite transformer middleware.
-                            // See: https://github.com/vitejs/vite/blob/746a1daab0395f98f0afbdee8f364cb6cf2f3b3f/packages/vite/src/node/server/middlewares/transform.ts#L201 and
-                            // https://github.com/vitejs/vite/blob/746a1daab0395f98f0afbdee8f364cb6cf2f3b3f/packages/vite/src/node/server/transformRequest.ts#L204-L206
-                            req.headers.accept = 'text/html';
-                            // 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 = `${server.config.base}@fs/${encodeURI(assetSourcePath)}`;
-                            next();
-                            return;
-                        }
-                        // Resource files are handled directly.
-                        // Global stylesheets (CSS files) are currently considered resources to workaround
-                        // dev server sourcemap issues with stylesheets.
-                        if (extension !== '.js' && extension !== '.html') {
-                            const outputFile = outputFiles.get(pathname);
-                            if (outputFile?.servable) {
-                                const mimeType = (0, mrmime_1.lookup)(extension);
-                                if (mimeType) {
-                                    res.setHeader('Content-Type', mimeType);
-                                }
-                                res.setHeader('Cache-Control', 'no-cache');
-                                if (serverOptions.headers) {
-                                    Object.entries(serverOptions.headers).forEach(([name, value]) => res.setHeader(name, value));
-                                }
-                                res.end(outputFile.contents);
-                                return;
-                            }
-                        }
-                        next();
-                    });
-                    if (extensionMiddleware?.length) {
-                        extensionMiddleware.forEach((middleware) => server.middlewares.use(middleware));
-                    }
-                    // Returning a function, installs middleware after the main transform middleware but
-                    // before the built-in HTML middleware
-                    return () => {
-                        function angularSSRMiddleware(req, res, next) {
-                            const url = req.originalUrl;
-                            if (
-                            // 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]))) {
-                                next();
-                                return;
-                            }
-                            const rawHtml = outputFiles.get('/index.server.html')?.contents;
-                            if (!rawHtml) {
-                                next();
-                                return;
-                            }
-                            transformIndexHtmlAndAddHeaders(url, rawHtml, res, next, async (html) => {
-                                const { content } = await (0, render_page_1.renderPage)({
-                                    document: html,
-                                    route: new URL(req.originalUrl ?? '/', server.resolvedUrls?.local[0]).toString(),
-                                    serverContext: 'ssr',
-                                    loadBundle: (uri) => 
-                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                    server.ssrLoadModule(uri.slice(1)),
-                                    // Files here are only needed for critical CSS inlining.
-                                    outputFiles: {},
-                                    // TODO: add support for critical css inlining.
-                                    inlineCriticalCss: false,
-                                });
-                                return indexHtmlTransformer && content
-                                    ? await indexHtmlTransformer(content)
-                                    : content;
-                            });
-                        }
-                        if (ssr) {
-                            server.middlewares.use(angularSSRMiddleware);
-                        }
-                        server.middlewares.use(function angularIndexMiddleware(req, res, next) {
-                            if (!req.url) {
-                                next();
-                                return;
-                            }
-                            // Parse the incoming request.
-                            // The base of the URL is unused but required to parse the URL.
-                            const pathname = pathnameWithoutBasePath(req.url, server.config.base);
-                            if (pathname === '/' || pathname === `/index.html`) {
-                                const rawHtml = outputFiles.get('/index.html')?.contents;
-                                if (rawHtml) {
-                                    transformIndexHtmlAndAddHeaders(req.url, rawHtml, res, next, indexHtmlTransformer);
-                                    return;
-                                }
-                            }
-                            next();
-                        });
-                    };
-                    function transformIndexHtmlAndAddHeaders(url, rawHtml, res, next, additionalTransformer) {
-                        server
-                            .transformIndexHtml(url, Buffer.from(rawHtml).toString('utf-8'))
-                            .then(async (processedHtml) => {
-                            if (additionalTransformer) {
-                                const content = await additionalTransformer(processedHtml);
-                                if (!content) {
-                                    next();
-                                    return;
-                                }
-                                processedHtml = content;
-                            }
-                            res.setHeader('Content-Type', 'text/html');
-                            res.setHeader('Cache-Control', 'no-cache');
-                            if (serverOptions.headers) {
-                                Object.entries(serverOptions.headers).forEach(([name, value]) => res.setHeader(name, value));
-                            }
-                            res.end(processedHtml);
-                        })
-                            .catch((error) => next(error));
-                    }
-                },
-            },
+            (0, angular_memory_plugin_1.createAngularMemoryPlugin)({
+                workspaceRoot: serverOptions.workspaceRoot,
+                virtualProjectRoot,
+                outputFiles,
+                assets,
+                ssr,
+                external: externalMetadata.explicit,
+                indexHtmlTransformer,
+                extensionMiddleware,
+                extraHeaders: serverOptions.headers,
+                normalizePath,
+            }),
         ],
         // Browser only optimizeDeps. (This does not run for SSR dependencies).
         optimizeDeps: getDepOptimizationConfig({
@@ -627,31 +453,6 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
     return configuration;
 }
 exports.setupServer = setupServer;
-/**
- * Reads the resolved Vite client code from disk and updates the content to remove
- * an unactionable suggestion to update the Vite configuration file to disable the
- * error overlay. The Vite configuration file is not present when used in the Angular
- * CLI.
- * @param file The absolute path to the Vite client code.
- * @returns
- */
-async function loadViteClientCode(file) {
-    const originalContents = await (0, promises_1.readFile)(file, 'utf-8');
-    let contents = originalContents.replace('You can also disable this overlay by setting', '');
-    contents = contents.replace(
-    // eslint-disable-next-line max-len
-    '<code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">vite.config.js.</code>', '');
-    (0, node_assert_1.default)(originalContents !== contents, 'Failed to update Vite client error overlay text.');
-    return contents;
-}
-function pathnameWithoutBasePath(url, basePath) {
-    const parsedUrl = new URL(url, 'http://localhost');
-    const pathname = decodeURIComponent(parsedUrl.pathname);
-    // slice(basePath.length - 1) to retain the trailing slash
-    return basePath !== '/' && pathname.startsWith(basePath)
-        ? pathname.slice(basePath.length - 1)
-        : pathname;
-}
 function getDepOptimizationConfig({ disabled, exclude, include, target, prebundleTransformer, ssr, loader, thirdPartySourcemaps, }) {
     const plugins = [
         {

package/src/builders/extract-i18n/application-extraction.js

@@ -20,9 +20,11 @@ async function extractMessages(options, builderName, context, extractorConstruct
     // Setup the build options for the application based on the buildTarget option
     const buildOptions = (await context.validateOptions(await context.getTargetOptions(options.buildTarget), builderName));
     buildOptions.optimization = false;
-    buildOptions.sourceMap = { scripts: true, vendor: true };
+    buildOptions.sourceMap = { scripts: true, vendor: true, styles: false };
     buildOptions.localize = false;
     buildOptions.budgets = undefined;
+    buildOptions.index = false;
+    buildOptions.serviceWorker = false;
     let build;
     if (builderName === '@angular-devkit/build-angular:application') {
         build = application_1.buildApplicationInternal;

package/src/builders/prerender/routes-extractor-worker.js

@@ -43,7 +43,7 @@ async function extract() {
     const browserIndexInputPath = path.join(outputPath, indexFile);
     const document = await fs.promises.readFile(browserIndexInputPath, 'utf8');
     const bootstrapAppFnOrModule = bootstrapAppFn || AppServerModule;
-    (0, node_assert_1.default)(bootstrapAppFnOrModule, `Neither an AppServerModule nor a bootstrapping function was exported from: ${serverBundlePath}.`);
+    (0, node_assert_1.default)(bootstrapAppFnOrModule, `The file "${serverBundlePath}" does not have a default export for an AppServerModule or a bootstrapping function.`);
     const routes = [];
     for await (const { route, success } of extractRoutes(bootstrapAppFnOrModule, document)) {
         if (success) {

package/src/tools/esbuild/angular/component-stylesheets.js

@@ -110,18 +110,20 @@ class ComponentStylesheetBundler {
         if (!result.errors) {
             for (const outputFile of result.outputFiles) {
                 const filename = node_path_1.default.basename(outputFile.path);
-                // Needed for Bazel as otherwise the files will not be written in the correct place.
-                outputFile.path = node_path_1.default.join(this.options.workspaceRoot, outputFile.path);
-                if (outputFile.type === bundler_context_1.BuildOutputFileType.Media) {
-                    // The output files could also contain resources (images/fonts/etc.) that were referenced
-                    outputFiles.push(outputFile);
+                if (outputFile.type === bundler_context_1.BuildOutputFileType.Media || filename.endsWith('.css.map')) {
+                    // The output files could also contain resources (images/fonts/etc.) that were referenced and the map files.
+                    // Clone the output file to avoid amending the original path which would causes problems during rebuild.
+                    const clonedOutputFile = outputFile.clone();
+                    // Needed for Bazel as otherwise the files will not be written in the correct place,
+                    // this is because esbuild will resolve the output file from the outdir which is currently set to `workspaceRoot` twice,
+                    // once in the stylesheet and the other in the application code bundler.
+                    // Ex: `../../../../../app.component.css.map`.
+                    clonedOutputFile.path = node_path_1.default.join(this.options.workspaceRoot, outputFile.path);
+                    outputFiles.push(clonedOutputFile);
                 }
                 else if (filename.endsWith('.css')) {
                     contents = outputFile.text;
                 }
-                else if (filename.endsWith('.css.map')) {
-                    outputFiles.push(outputFile);
-                }
                 else {
                     throw new Error(`Unexpected non CSS/Media file "${filename}" outputted during component stylesheet processing.`);
                 }

package/src/tools/esbuild/application-code-bundle.js

@@ -18,6 +18,7 @@ const node_path_1 = require("node:path");
 const environment_options_1 = require("../../utils/environment-options");
 const compiler_plugin_1 = require("./angular/compiler-plugin");
 const compiler_plugin_options_1 = require("./compiler-plugin-options");
+const external_packages_plugin_1 = require("./external-packages-plugin");
 const i18n_locale_plugin_1 = require("./i18n-locale-plugin");
 const rxjs_esm_resolution_plugin_1 = require("./rxjs-esm-resolution-plugin");
 const sourcemap_ignorelist_plugin_1 = require("./sourcemap-ignorelist-plugin");
@@ -47,12 +48,20 @@ function createBrowserCodeBundleOptions(options, target, sourceFileCache) {
             styleOptions),
         ],
     };
-    if (options.externalPackages) {
-        buildOptions.packages = 'external';
-    }
     if (options.plugins) {
         buildOptions.plugins?.push(...options.plugins);
     }
+    if (options.externalPackages) {
+        // Package files affected by a customized loader should not be implicitly marked as external
+        if (options.loaderExtensions || options.plugins) {
+            // Plugin must be added after custom plugins to ensure any added loader options are considered
+            buildOptions.plugins?.push((0, external_packages_plugin_1.createExternalPackagesPlugin)());
+        }
+        else {
+            // Safe to use the packages external option directly
+            buildOptions.packages = 'external';
+        }
+    }
     return buildOptions;
 }
 exports.createBrowserCodeBundleOptions = createBrowserCodeBundleOptions;

package/src/tools/esbuild/bundler-context.js

@@ -177,10 +177,12 @@ class BundlerContext {
             if (this.incremental) {
                 // When incremental always add any files from the load result cache
                 if (this.#loadCache) {
-                    this.#loadCache.watchFiles
-                        .filter((file) => !isInternalAngularFile(file))
-                        // watch files are fully resolved paths
-                        .forEach((file) => this.watchFiles.add(file));
+                    for (const file of this.#loadCache.watchFiles) {
+                        if (!isInternalAngularFile(file)) {
+                            // watch files are fully resolved paths
+                            this.watchFiles.add(file);
+                        }
+                    }
                 }
             }
         }
@@ -189,10 +191,12 @@ class BundlerContext {
         // currently enabled with watch mode where watch files are needed.
         if (this.incremental) {
             // Add input files except virtual angular files which do not exist on disk
-            Object.keys(result.metafile.inputs)
-                .filter((input) => !isInternalAngularFile(input))
-                // input file paths are always relative to the workspace root
-                .forEach((input) => this.watchFiles.add((0, node_path_1.join)(this.workspaceRoot, input)));
+            for (const input of Object.keys(result.metafile.inputs)) {
+                if (!isInternalAngularFile(input)) {
+                    // input file paths are always relative to the workspace root
+                    this.watchFiles.add((0, node_path_1.join)(this.workspaceRoot, input));
+                }
+            }
         }
         // Return if the build encountered any errors
         if (result.errors.length) {
@@ -256,7 +260,9 @@ class BundlerContext {
         for (const { imports } of Object.values(result.metafile.outputs)) {
             for (const importData of imports) {
                 if (!importData.external ||
-                    (importData.kind !== 'import-statement' && importData.kind !== 'dynamic-import')) {
+                    (importData.kind !== 'import-statement' &&
+                        importData.kind !== 'dynamic-import' &&
+                        importData.kind !== 'require-call')) {
                     continue;
                 }
                 externalImports.add(importData.path);

package/src/tools/esbuild/external-packages-plugin.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import type { Plugin } from 'esbuild';
+/**
+ * Creates a plugin that marks any resolved path as external if it is within a node modules directory.
+ * This is used instead of the esbuild `packages` option to avoid marking files that should be loaded
+ * via customized loaders. This is necessary to prevent Vite development server pre-bundling errors.
+ *
+ * @returns An esbuild plugin.
+ */
+export declare function createExternalPackagesPlugin(): Plugin;

package/src/tools/esbuild/external-packages-plugin.js

@@ -0,0 +1,66 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createExternalPackagesPlugin = void 0;
+const node_path_1 = require("node:path");
+const EXTERNAL_PACKAGE_RESOLUTION = Symbol('EXTERNAL_PACKAGE_RESOLUTION');
+/**
+ * Creates a plugin that marks any resolved path as external if it is within a node modules directory.
+ * This is used instead of the esbuild `packages` option to avoid marking files that should be loaded
+ * via customized loaders. This is necessary to prevent Vite development server pre-bundling errors.
+ *
+ * @returns An esbuild plugin.
+ */
+function createExternalPackagesPlugin() {
+    return {
+        name: 'angular-external-packages',
+        setup(build) {
+            // Safe to use native packages external option if no loader options present
+            if (build.initialOptions.loader === undefined ||
+                Object.keys(build.initialOptions.loader).length === 0) {
+                build.initialOptions.packages = 'external';
+                return;
+            }
+            const loaderFileExtensions = new Set(Object.keys(build.initialOptions.loader));
+            // Only attempt resolve of non-relative and non-absolute paths
+            build.onResolve({ filter: /^[^./]/ }, async (args) => {
+                if (args.pluginData?.[EXTERNAL_PACKAGE_RESOLUTION]) {
+                    return null;
+                }
+                const { importer, kind, resolveDir, namespace, pluginData = {} } = args;
+                pluginData[EXTERNAL_PACKAGE_RESOLUTION] = true;
+                const result = await build.resolve(args.path, {
+                    importer,
+                    kind,
+                    namespace,
+                    pluginData,
+                    resolveDir,
+                });
+                // Return result if unable to resolve or explicitly marked external (externalDependencies option)
+                if (!result.path || result.external) {
+                    return result;
+                }
+                // Allow customized loaders to run against configured paths regardless of location
+                if (loaderFileExtensions.has((0, node_path_1.extname)(result.path))) {
+                    return result;
+                }
+                // Mark paths from a node modules directory as external
+                if (/[\\/]node_modules[\\/]/.test(result.path)) {
+                    return {
+                        path: args.path,
+                        external: true,
+                    };
+                }
+                // Otherwise return original result
+                return result;
+            });
+        },
+    };
+}
+exports.createExternalPackagesPlugin = createExternalPackagesPlugin;

package/src/tools/esbuild/stylesheets/css-resource-plugin.js

@@ -11,6 +11,7 @@ exports.createCssResourcePlugin = void 0;
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
 const load_result_cache_1 = require("../load-result-cache");
+const CSS_RESOURCE_NAMESPACE = 'angular:css-resource';
 /**
  * Symbol marker used to indicate CSS resource resolution is being attempted.
  * This is used to prevent an infinite loop within the plugin's resolve hook.
@@ -89,10 +90,10 @@ function createCssResourcePlugin(cache) {
                     // Use a relative path to prevent fully resolved paths in the metafile (JSON stats file).
                     // This is only necessary for custom namespaces. esbuild will handle the file namespace.
                     path: (0, node_path_1.relative)(build.initialOptions.absWorkingDir ?? '', result.path),
-                    namespace: 'css-resource',
+                    namespace: CSS_RESOURCE_NAMESPACE,
                 };
             });
-            build.onLoad({ filter: /./, namespace: 'css-resource' }, (0, load_result_cache_1.createCachedLoad)(cache, async (args) => {
+            build.onLoad({ filter: /./, namespace: CSS_RESOURCE_NAMESPACE }, (0, load_result_cache_1.createCachedLoad)(cache, async (args) => {
                 const resourcePath = (0, node_path_1.join)(build.initialOptions.absWorkingDir ?? '', args.path);
                 return {
                     contents: await (0, promises_1.readFile)(resourcePath),

package/src/tools/vite/angular-memory-plugin.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import type { Connect, Plugin } from 'vite';
+export interface AngularMemoryPluginOptions {
+    workspaceRoot: string;
+    virtualProjectRoot: string;
+    outputFiles: Map<string, {
+        contents: Uint8Array;
+        servable: boolean;
+    }>;
+    assets: Map<string, string>;
+    ssr: boolean;
+    external?: string[];
+    extensionMiddleware?: Connect.NextHandleFunction[];
+    extraHeaders?: Record<string, string>;
+    indexHtmlTransformer?: (content: string) => Promise<string>;
+    normalizePath: (path: string) => string;
+}
+export declare function createAngularMemoryPlugin(options: AngularMemoryPluginOptions): Plugin;

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

@@ -0,0 +1,251 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAngularMemoryPlugin = void 0;
+const remapping_1 = __importDefault(require("@ampproject/remapping"));
+const mrmime_1 = require("mrmime");
+const node_assert_1 = __importDefault(require("node:assert"));
+const promises_1 = require("node:fs/promises");
+const node_path_1 = require("node:path");
+const render_page_1 = require("../../utils/server-rendering/render-page");
+// eslint-disable-next-line max-lines-per-function
+function createAngularMemoryPlugin(options) {
+    const { workspaceRoot, virtualProjectRoot, outputFiles, assets, external, ssr, extensionMiddleware, extraHeaders, indexHtmlTransformer, normalizePath, } = options;
+    return {
+        name: 'vite:angular-memory',
+        // Ensures plugin hooks run before built-in Vite hooks
+        enforce: 'pre',
+        async resolveId(source, importer) {
+            // Prevent vite from resolving an explicit external dependency (`externalDependencies` option)
+            if (external?.includes(source)) {
+                // This is still not ideal since Vite will still transform the import specifier to
+                // `/@id/${source}` but is currently closer to a raw external than a resolved file path.
+                return source;
+            }
+            if (importer && source[0] === '.' && importer.startsWith(virtualProjectRoot)) {
+                // Remove query if present
+                const [importerFile] = importer.split('?', 1);
+                source =
+                    '/' + normalizePath((0, node_path_1.join)((0, node_path_1.dirname)((0, node_path_1.relative)(virtualProjectRoot, importerFile)), source));
+            }
+            const [file] = source.split('?', 1);
+            if (outputFiles.has(file)) {
+                return (0, node_path_1.join)(virtualProjectRoot, source);
+            }
+        },
+        load(id) {
+            const [file] = id.split('?', 1);
+            const relativeFile = '/' + normalizePath((0, node_path_1.relative)(virtualProjectRoot, file));
+            const codeContents = outputFiles.get(relativeFile)?.contents;
+            if (codeContents === undefined) {
+                if (relativeFile.endsWith('/node_modules/vite/dist/client/client.mjs')) {
+                    return loadViteClientCode(file);
+                }
+                return;
+            }
+            const code = Buffer.from(codeContents).toString('utf-8');
+            const mapContents = outputFiles.get(relativeFile + '.map')?.contents;
+            return {
+                // Remove source map URL comments from the code if a sourcemap is present.
+                // Vite will inline and add an additional sourcemap URL for the sourcemap.
+                code: mapContents ? code.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, '') : code,
+                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) => {
+                const result = await originalssrTransform(code, null, url, originalCode);
+                if (!result || !result.map || !map) {
+                    return result;
+                }
+                const remappedMap = (0, remapping_1.default)([result.map, map], () => null);
+                // Set the sourcemap root to the workspace root. This is needed since we set a virtual path as root.
+                remappedMap.sourceRoot = normalizePath(workspaceRoot) + '/';
+                return {
+                    ...result,
+                    map: remappedMap,
+                };
+            };
+            // Assets and resources get handled first
+            server.middlewares.use(function angularAssetsMiddleware(req, res, next) {
+                if (req.url === undefined || res.writableEnded) {
+                    return;
+                }
+                // Parse the incoming request.
+                // The base of the URL is unused but required to parse the URL.
+                const pathname = pathnameWithoutBasePath(req.url, server.config.base);
+                const extension = (0, node_path_1.extname)(pathname);
+                // Rewrite all build assets to a vite raw fs URL
+                const assetSourcePath = assets.get(pathname);
+                if (assetSourcePath !== undefined) {
+                    // Workaround to disable Vite transformer middleware.
+                    // See: https://github.com/vitejs/vite/blob/746a1daab0395f98f0afbdee8f364cb6cf2f3b3f/packages/vite/src/node/server/middlewares/transform.ts#L201 and
+                    // https://github.com/vitejs/vite/blob/746a1daab0395f98f0afbdee8f364cb6cf2f3b3f/packages/vite/src/node/server/transformRequest.ts#L204-L206
+                    req.headers.accept = 'text/html';
+                    // 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 = `${server.config.base}@fs/${encodeURI(assetSourcePath)}`;
+                    next();
+                    return;
+                }
+                // Resource files are handled directly.
+                // Global stylesheets (CSS files) are currently considered resources to workaround
+                // dev server sourcemap issues with stylesheets.
+                if (extension !== '.js' && extension !== '.html') {
+                    const outputFile = outputFiles.get(pathname);
+                    if (outputFile?.servable) {
+                        const mimeType = (0, mrmime_1.lookup)(extension);
+                        if (mimeType) {
+                            res.setHeader('Content-Type', mimeType);
+                        }
+                        res.setHeader('Cache-Control', 'no-cache');
+                        if (extraHeaders) {
+                            Object.entries(extraHeaders).forEach(([name, value]) => res.setHeader(name, value));
+                        }
+                        res.end(outputFile.contents);
+                        return;
+                    }
+                }
+                next();
+            });
+            if (extensionMiddleware?.length) {
+                extensionMiddleware.forEach((middleware) => server.middlewares.use(middleware));
+            }
+            // 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 mime type lookup to mitigate against matching requests like: /browse/pl.0ef59752c0cd457dbf1391f08cbd936f
+                        lookupMimeTypeFromRequest(url)) {
+                        next();
+                        return;
+                    }
+                    const rawHtml = outputFiles.get('/index.server.html')?.contents;
+                    if (!rawHtml) {
+                        next();
+                        return;
+                    }
+                    transformIndexHtmlAndAddHeaders(req.url, rawHtml, res, next, async (html) => {
+                        const { content } = await (0, render_page_1.renderPage)({
+                            document: html,
+                            route: new URL(req.originalUrl ?? '/', server.resolvedUrls?.local[0]).toString(),
+                            serverContext: 'ssr',
+                            loadBundle: (uri) => 
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            server.ssrLoadModule(uri.slice(1)),
+                            // Files here are only needed for critical CSS inlining.
+                            outputFiles: {},
+                            // TODO: add support for critical css inlining.
+                            inlineCriticalCss: false,
+                        });
+                        return indexHtmlTransformer && content ? await indexHtmlTransformer(content) : content;
+                    });
+                }
+                if (ssr) {
+                    server.middlewares.use(angularSSRMiddleware);
+                }
+                server.middlewares.use(function angularIndexMiddleware(req, res, next) {
+                    if (!req.url) {
+                        next();
+                        return;
+                    }
+                    // Parse the incoming request.
+                    // The base of the URL is unused but required to parse the URL.
+                    const pathname = pathnameWithoutBasePath(req.url, server.config.base);
+                    if (pathname === '/' || pathname === `/index.html`) {
+                        const rawHtml = outputFiles.get('/index.html')?.contents;
+                        if (rawHtml) {
+                            transformIndexHtmlAndAddHeaders(req.url, rawHtml, res, next, indexHtmlTransformer);
+                            return;
+                        }
+                    }
+                    next();
+                });
+            };
+            function transformIndexHtmlAndAddHeaders(url, rawHtml, res, next, additionalTransformer) {
+                server
+                    .transformIndexHtml(url, Buffer.from(rawHtml).toString('utf-8'))
+                    .then(async (processedHtml) => {
+                    if (additionalTransformer) {
+                        const content = await additionalTransformer(processedHtml);
+                        if (!content) {
+                            next();
+                            return;
+                        }
+                        processedHtml = content;
+                    }
+                    res.setHeader('Content-Type', 'text/html');
+                    res.setHeader('Cache-Control', 'no-cache');
+                    if (extraHeaders) {
+                        Object.entries(extraHeaders).forEach(([name, value]) => res.setHeader(name, value));
+                    }
+                    res.end(processedHtml);
+                })
+                    .catch((error) => next(error));
+            }
+        },
+    };
+}
+exports.createAngularMemoryPlugin = createAngularMemoryPlugin;
+/**
+ * Reads the resolved Vite client code from disk and updates the content to remove
+ * an unactionable suggestion to update the Vite configuration file to disable the
+ * error overlay. The Vite configuration file is not present when used in the Angular
+ * CLI.
+ * @param file The absolute path to the Vite client code.
+ * @returns
+ */
+async function loadViteClientCode(file) {
+    const originalContents = await (0, promises_1.readFile)(file, 'utf-8');
+    let contents = originalContents.replace('You can also disable this overlay by setting', '');
+    contents = contents.replace(
+    // eslint-disable-next-line max-len
+    '<code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">vite.config.js.</code>', '');
+    (0, node_assert_1.default)(originalContents !== contents, 'Failed to update Vite client error overlay text.');
+    return contents;
+}
+function pathnameWithoutBasePath(url, basePath) {
+    const parsedUrl = new URL(url, 'http://localhost');
+    const pathname = decodeURIComponent(parsedUrl.pathname);
+    // slice(basePath.length - 1) to retain the trailing slash
+    return basePath !== '/' && pathname.startsWith(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);
+}

package/src/utils/index-file/inline-critical-css.js

@@ -23,23 +23,31 @@ const MEDIA_SET_HANDLER_PATTERN = /^this\.media=["'](.*)["'];?$/;
 const CSP_MEDIA_ATTR = 'ngCspMedia';
 /**
  * Script text used to change the media value of the link tags.
+ *
+ * NOTE:
+ * We do not use `document.querySelectorAll('link').forEach((s) => s.addEventListener('load', ...)`
+ * because this does not always fire on Chome.
+ * See: https://github.com/angular/angular-cli/issues/26932 and https://crbug.com/1521256
  */
 const LINK_LOAD_SCRIPT_CONTENT = [
-    `(() => {`,
-    // Save the `children` in a variable since they're a live DOM node collection.
-    // We iterate over the direct descendants, instead of going through a `querySelectorAll`,
-    // because we know that the tags will be directly inside the `head`.
-    `  const children = document.head.children;`,
-    // Declare `onLoad` outside the loop to avoid leaking memory.
-    // Can't be an arrow function, because we need `this` to refer to the DOM node.
-    `  function onLoad() {this.media = this.getAttribute('${CSP_MEDIA_ATTR}');}`,
-    // Has to use a plain for loop, because some browsers don't support
-    // `forEach` on `children` which is a `HTMLCollection`.
-    `  for (let i = 0; i < children.length; i++) {`,
-    `    const child = children[i];`,
-    `    child.hasAttribute('${CSP_MEDIA_ATTR}') && child.addEventListener('load', onLoad);`,
-    `  }`,
-    `})();`,
+    '(() => {',
+    `  const CSP_MEDIA_ATTR = '${CSP_MEDIA_ATTR}';`,
+    '  const documentElement = document.documentElement;',
+    '  const listener = (e) => {',
+    '    const target = e.target;',
+    `    if (!target || target.tagName !== 'LINK' || !target.hasAttribute(CSP_MEDIA_ATTR)) {`,
+    '     return;',
+    '    }',
+    '    target.media = target.getAttribute(CSP_MEDIA_ATTR);',
+    '    target.removeAttribute(CSP_MEDIA_ATTR);',
+    // Remove onload listener when there are no longer styles that need to be loaded.
+    '    if (!document.head.querySelector(`link[${CSP_MEDIA_ATTR}]`)) {',
+    `      documentElement.removeEventListener('load', listener);`,
+    '    }',
+    '  };',
+    //  We use an event with capturing (the true parameter) because load events don't bubble.
+    `  documentElement.addEventListener('load', listener, true);`,
+    '})();',
 ].join('\n');
 class CrittersExtended extends critters_1.default {
     optionsExtended;
@@ -105,7 +113,7 @@ class CrittersExtended extends critters_1.default {
                 // `addEventListener` to apply the media query instead.
                 link.removeAttribute('onload');
                 link.setAttribute(CSP_MEDIA_ATTR, crittersMedia[1]);
-                this.conditionallyInsertCspLoadingScript(document, cspNonce);
+                this.conditionallyInsertCspLoadingScript(document, cspNonce, link);
             }
             // Ideally we would hook in at the time Critters inserts the `style` tags, but there isn't
             // a way of doing that at the moment so we fall back to doing it any time a `link` tag is
@@ -137,16 +145,16 @@ class CrittersExtended extends critters_1.default {
      * Inserts the `script` tag that swaps the critical CSS at runtime,
      * if one hasn't been inserted into the document already.
      */
-    conditionallyInsertCspLoadingScript(document, nonce) {
+    conditionallyInsertCspLoadingScript(document, nonce, link) {
         if (this.addedCspScriptsDocuments.has(document)) {
             return;
         }
         const script = document.createElement('script');
         script.setAttribute('nonce', nonce);
         script.textContent = LINK_LOAD_SCRIPT_CONTENT;
-        // Append the script to the head since it needs to
-        // run as early as possible, after the `link` tags.
-        document.head.appendChild(script);
+        // Prepend the script to the head since it needs to
+        // run as early as possible, before the `link` tags.
+        document.head.insertBefore(script, link);
         this.addedCspScriptsDocuments.add(document);
     }
 }

package/src/utils/load-proxy-config.js

@@ -135,9 +135,9 @@ function normalizeProxyConfiguration(proxy) {
     }
     // TODO: Consider upstreaming glob support
     for (const key of Object.keys(normalizedProxy)) {
-        if ((0, fast_glob_1.isDynamicPattern)(key)) {
-            const { output } = (0, picomatch_1.parse)(key);
-            normalizedProxy[`^${output}$`] = normalizedProxy[key];
+        if (key[0] !== '^' && (0, fast_glob_1.isDynamicPattern)(key)) {
+            const pattern = (0, picomatch_1.makeRe)(key).source;
+            normalizedProxy[pattern] = normalizedProxy[key];
             delete normalizedProxy[key];
         }
     }

package/src/utils/server-rendering/render-page.js

@@ -29,8 +29,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderPage = void 0;
+const node_assert_1 = __importDefault(require("node:assert"));
 const node_path_1 = require("node:path");
 const load_esm_1 = require("../load-esm");
 /**
@@ -65,6 +69,7 @@ async function renderPage({ route, serverContext, document, inlineCriticalCss, o
         },
     ];
     let html;
+    (0, node_assert_1.default)(bootstrapAppFnOrModule, 'The file "./main.server.mjs" does not have a default export for an AppServerModule or a bootstrapping function.');
     if (isBootstrapFn(bootstrapAppFnOrModule)) {
         html = await renderApplication(bootstrapAppFnOrModule, {
             document,