@angular-devkit/build-angular 19.0.0-rc.0 → 19.0.0-rc.2

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "19.0.0-rc.0",
+  "version": "19.0.0-rc.2",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.1900.0-rc.0",
-    "@angular-devkit/build-webpack": "0.1900.0-rc.0",
-    "@angular-devkit/core": "19.0.0-rc.0",
-    "@angular/build": "19.0.0-rc.0",
+    "@angular-devkit/architect": "0.1900.0-rc.2",
+    "@angular-devkit/build-webpack": "0.1900.0-rc.2",
+    "@angular-devkit/core": "19.0.0-rc.2",
+    "@angular/build": "19.0.0-rc.2",
     "@babel/core": "7.26.0",
-    "@babel/generator": "7.26.0",
+    "@babel/generator": "7.26.2",
     "@babel/helper-annotate-as-pure": "7.25.9",
     "@babel/helper-split-export-declaration": "7.24.7",
     "@babel/plugin-transform-async-generator-functions": "7.25.9",
@@ -21,7 +21,7 @@
     "@babel/preset-env": "7.26.0",
     "@babel/runtime": "7.26.0",
     "@discoveryjs/json-ext": "0.6.3",
-    "@ngtools/webpack": "19.0.0-rc.0",
+    "@ngtools/webpack": "19.0.0-rc.2",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.20",
@@ -39,24 +39,24 @@
     "less-loader": "12.2.0",
     "license-webpack-plugin": "4.0.2",
     "loader-utils": "3.3.1",
-    "mini-css-extract-plugin": "2.9.1",
+    "mini-css-extract-plugin": "2.9.2",
     "open": "10.1.0",
     "ora": "5.4.1",
     "picomatch": "4.0.2",
     "piscina": "4.7.0",
-    "postcss": "8.4.47",
+    "postcss": "8.4.49",
     "postcss-loader": "8.1.1",
     "resolve-url-loader": "5.0.0",
     "rxjs": "7.8.1",
-    "sass": "1.80.5",
-    "sass-loader": "16.0.2",
+    "sass": "1.80.7",
+    "sass-loader": "16.0.3",
     "semver": "7.6.3",
     "source-map-loader": "5.0.0",
     "source-map-support": "0.5.21",
     "terser": "5.36.0",
     "tree-kill": "1.2.2",
-    "tslib": "2.8.0",
-    "webpack": "5.95.0",
+    "tslib": "2.8.1",
+    "webpack": "5.96.1",
     "webpack-dev-middleware": "7.4.2",
     "webpack-dev-server": "5.1.0",
     "webpack-merge": "6.0.1",
@@ -70,7 +70,7 @@
     "@angular/localize": "^19.0.0-next.0",
     "@angular/platform-server": "^19.0.0-next.0",
     "@angular/service-worker": "^19.0.0-next.0",
-    "@angular/ssr": "^19.0.0-rc.0",
+    "@angular/ssr": "^19.0.0-rc.2",
     "@web/test-runner": "^0.19.0",
     "browser-sync": "^3.0.2",
     "jest": "^29.5.0",

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

@@ -72,6 +72,8 @@ function execute(options, context, transforms = {}, extensions) {
             if (options.disableHostCheck) {
                 context.logger.warn(`The "disableHostCheck" option will not be used because it is not supported by the "${builderName}" builder.`);
             }
+            // New build system defaults hmr option to the value of liveReload
+            normalizedOptions.hmr ??= normalizedOptions.liveReload;
             return (0, rxjs_1.defer)(() => Promise.all([Promise.resolve().then(() => __importStar(require('@angular/build/private'))), Promise.resolve().then(() => __importStar(require('../browser-esbuild')))])).pipe((0, rxjs_1.switchMap)(([{ serveWithVite, buildApplicationInternal }, { convertBrowserOptions }]) => serveWithVite(normalizedOptions, builderName, (options, context, codePlugins) => {
                 return builderName === '@angular-devkit/build-angular:browser-esbuild'
                     ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -91,6 +93,8 @@ function execute(options, context, transforms = {}, extensions) {
         if (extensions?.middleware?.length) {
             throw new Error('Only the "application" and "browser-esbuild" builders support middleware.');
         }
+        // Webpack based build systems default to false for hmr option
+        normalizedOptions.hmr ??= false;
         // Use Webpack for all other browser targets
         return (0, rxjs_1.defer)(() => Promise.resolve().then(() => __importStar(require('./webpack-server')))).pipe((0, rxjs_1.switchMap)(({ serveWebpackBrowser }) => serveWebpackBrowser(normalizedOptions, builderName, context, transforms)));
     }));

package/src/builders/dev-server/options.d.ts

@@ -26,7 +26,7 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     open: boolean | undefined;
     verbose: boolean | undefined;
     watch: boolean | undefined;
-    liveReload: boolean | undefined;
+    liveReload: boolean;
     hmr: boolean | undefined;
     headers: {
         [key: string]: string;

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

@@ -85,7 +85,7 @@ async function normalizeOptions(context, projectName, options) {
         open,
         verbose,
         watch,
-        liveReload,
+        liveReload: !!liveReload,
         hmr,
         headers,
         workspaceRoot,

package/src/builders/dev-server/schema.json

@@ -84,8 +84,7 @@
     },
     "hmr": {
       "type": "boolean",
-      "description": "Enable hot module replacement.",
-      "default": false
+      "description": "Enable hot module replacement."
     },
     "watch": {
       "type": "boolean",

package/src/builders/karma/application_builder.js

@@ -50,26 +50,84 @@ class ApplicationBuildError extends Error {
         this.name = 'ApplicationBuildError';
     }
 }
-function injectKarmaReporter(context, buildOptions, karmaConfig, subscriber) {
+const LATEST_BUILD_FILES_TOKEN = 'angularLatestBuildFiles';
+class AngularAssetsMiddleware {
+    serveFile;
+    latestBuildFiles;
+    static $inject = ['serveFile', LATEST_BUILD_FILES_TOKEN];
+    static NAME = 'angular-test-assets';
+    constructor(serveFile, latestBuildFiles) {
+        this.serveFile = serveFile;
+        this.latestBuildFiles = latestBuildFiles;
+    }
+    handle(req, res, next) {
+        let err = null;
+        try {
+            const url = new URL(`http://${req.headers['host']}${req.url}`);
+            const file = this.latestBuildFiles.files[url.pathname.slice(1)];
+            if (file?.origin === 'disk') {
+                this.serveFile(file.inputPath, undefined, res);
+                return;
+            }
+            else if (file?.origin === 'memory') {
+                // Include pathname to help with Content-Type headers.
+                this.serveFile(`/unused/${url.pathname}`, undefined, res, undefined, file.contents, true);
+                return;
+            }
+        }
+        catch (e) {
+            err = e;
+        }
+        next(err);
+    }
+    static createPlugin(initialFiles) {
+        return {
+            [LATEST_BUILD_FILES_TOKEN]: ['value', { files: { ...initialFiles.files } }],
+            [`middleware:${AngularAssetsMiddleware.NAME}`]: [
+                'factory',
+                Object.assign((...args) => {
+                    const inst = new AngularAssetsMiddleware(...args);
+                    return inst.handle.bind(inst);
+                }, AngularAssetsMiddleware),
+            ],
+        };
+    }
+}
+function injectKarmaReporter(context, buildOptions, buildIterator, karmaConfig, subscriber) {
     const reporterName = 'angular-progress-notifier';
     class ProgressNotifierReporter {
         emitter;
-        static $inject = ['emitter'];
-        constructor(emitter) {
+        latestBuildFiles;
+        static $inject = ['emitter', LATEST_BUILD_FILES_TOKEN];
+        constructor(emitter, latestBuildFiles) {
             this.emitter = emitter;
+            this.latestBuildFiles = latestBuildFiles;
             this.startWatchingBuild();
         }
         startWatchingBuild() {
             void (async () => {
-                for await (const buildOutput of (0, private_1.buildApplicationInternal)({
-                    ...buildOptions,
-                    watch: true,
-                }, context)) {
+                // This is effectively "for await of but skip what's already consumed".
+                let isDone = false; // to mark the loop condition as "not constant".
+                while (!isDone) {
+                    const { done, value: buildOutput } = await buildIterator.next();
+                    if (done) {
+                        isDone = true;
+                        break;
+                    }
                     if (buildOutput.kind === private_1.ResultKind.Failure) {
                         subscriber.next({ success: false, message: 'Build failed' });
                     }
                     else if (buildOutput.kind === private_1.ResultKind.Incremental ||
                         buildOutput.kind === private_1.ResultKind.Full) {
+                        if (buildOutput.kind === private_1.ResultKind.Full) {
+                            this.latestBuildFiles.files = buildOutput.files;
+                        }
+                        else {
+                            this.latestBuildFiles.files = {
+                                ...this.latestBuildFiles.files,
+                                ...buildOutput.files,
+                            };
+                        }
                         await writeTestFiles(buildOutput.files, buildOptions.outputPath);
                         this.emitter.refreshFiles();
                     }
@@ -96,11 +154,11 @@ function injectKarmaReporter(context, buildOptions, karmaConfig, subscriber) {
     });
 }
 function execute(options, context, karmaOptions, transforms = {}) {
-    return (0, rxjs_1.from)(initializeApplication(options, context, karmaOptions, transforms)).pipe((0, rxjs_1.switchMap)(([karma, karmaConfig, buildOptions]) => new rxjs_1.Observable((subscriber) => {
+    return (0, rxjs_1.from)(initializeApplication(options, context, karmaOptions, transforms)).pipe((0, rxjs_1.switchMap)(([karma, karmaConfig, buildOptions, buildIterator]) => new rxjs_1.Observable((subscriber) => {
         // If `--watch` is explicitly enabled or if we are keeping the Karma
         // process running, we should hook Karma into the build.
-        if (options.watch ?? !karmaConfig.singleRun) {
-            injectKarmaReporter(context, buildOptions, karmaConfig, subscriber);
+        if (buildIterator) {
+            injectKarmaReporter(context, buildOptions, buildIterator, karmaConfig, subscriber);
         }
         // Complete the observable once the Karma server returns.
         const karmaServer = new karma.Server(karmaConfig, (exitCode) => {
@@ -138,7 +196,21 @@ function normalizePolyfills(polyfills) {
 async function collectEntrypoints(options, context, projectSourceRoot) {
     // Glob for files to test.
     const testFiles = await (0, find_tests_1.findTests)(options.include ?? [], options.exclude ?? [], context.workspaceRoot, projectSourceRoot);
-    return new Set(testFiles);
+    const seen = new Set();
+    return new Map(Array.from(testFiles, (testFile) => {
+        const relativePath = path
+            .relative(testFile.startsWith(projectSourceRoot) ? projectSourceRoot : context.workspaceRoot, testFile)
+            .replace(/^[./]+/, '_')
+            .replace(/\//g, '-');
+        let uniqueName = `spec-${path.basename(relativePath, path.extname(relativePath))}`;
+        let suffix = 2;
+        while (seen.has(uniqueName)) {
+            uniqueName = `${relativePath}-${suffix}`;
+            ++suffix;
+        }
+        seen.add(uniqueName);
+        return [uniqueName, testFile];
+    }));
 }
 async function initializeApplication(options, context, karmaOptions, transforms = {}) {
     if (transforms.webpackConfiguration) {
@@ -151,18 +223,18 @@ async function initializeApplication(options, context, karmaOptions, transforms
         collectEntrypoints(options, context, projectSourceRoot),
         fs.rm(outputPath, { recursive: true, force: true }),
     ]);
-    let mainName = 'init_test_bed';
+    const mainName = 'test_main';
     if (options.main) {
-        entryPoints.add(options.main);
-        mainName = path.basename(options.main, path.extname(options.main));
+        entryPoints.set(mainName, options.main);
     }
     else {
-        entryPoints.add('@angular-devkit/build-angular/src/builders/karma/init_test_bed.js');
+        entryPoints.set(mainName, '@angular-devkit/build-angular/src/builders/karma/init_test_bed.js');
     }
     const instrumentForCoverage = options.codeCoverage
         ? createInstrumentationFilter(projectSourceRoot, getInstrumentationExcludedPaths(context.workspaceRoot, options.codeCoverageExclude ?? []))
         : undefined;
     const buildOptions = {
+        assets: options.assets,
         entryPoints,
         tsConfig: options.tsConfig,
         outputPath,
@@ -179,9 +251,10 @@ async function initializeApplication(options, context, karmaOptions, transforms
         styles: options.styles,
         polyfills: normalizePolyfills(options.polyfills),
         webWorkerTsConfig: options.webWorkerTsConfig,
+        watch: options.watch ?? !karmaOptions.singleRun,
     };
     // Build tests with `application` builder, using test files as entry points.
-    const buildOutput = await first((0, private_1.buildApplicationInternal)(buildOptions, context));
+    const [buildOutput, buildIterator] = await first((0, private_1.buildApplicationInternal)(buildOptions, context), { cancel: !buildOptions.watch });
     if (buildOutput.kind === private_1.ResultKind.Failure) {
         throw new ApplicationBuildError('Build failed');
     }
@@ -193,46 +266,55 @@ async function initializeApplication(options, context, karmaOptions, transforms
     karmaOptions.files ??= [];
     karmaOptions.files.push(
     // Serve polyfills first.
-    { pattern: `${outputPath}/polyfills.js`, type: 'module' }, 
+    { pattern: `${outputPath}/polyfills.js`, type: 'module', watched: false }, 
     // Serve global setup script.
-    { pattern: `${outputPath}/${mainName}.js`, type: 'module' }, 
+    { pattern: `${outputPath}/${mainName}.js`, type: 'module', watched: false }, 
     // Serve all source maps.
-    { pattern: `${outputPath}/*.map`, included: false });
+    { pattern: `${outputPath}/*.map`, included: false, watched: false }, 
+    // These are the test entrypoints.
+    { pattern: `${outputPath}/spec-*.js`, type: 'module', watched: false });
     if (hasChunkOrWorkerFiles(buildOutput.files)) {
         karmaOptions.files.push(
         // Allow loading of chunk-* files but don't include them all on load.
-        { pattern: `${outputPath}/{chunk,worker}-*.js`, type: 'module', included: false });
+        {
+            pattern: `${outputPath}/{chunk,worker}-*.js`,
+            type: 'module',
+            included: false,
+            watched: false,
+        });
     }
-    karmaOptions.files.push(
-    // Serve remaining JS on page load, these are the test entrypoints.
-    { pattern: `${outputPath}/*.js`, type: 'module' });
     if (options.styles?.length) {
         // Serve CSS outputs on page load, these are the global styles.
-        karmaOptions.files.push({ pattern: `${outputPath}/*.css`, type: 'css' });
+        karmaOptions.files.push({ pattern: `${outputPath}/*.css`, type: 'css', watched: false });
     }
     const parsedKarmaConfig = await karma.config.parseConfig(options.karmaConfig && path.resolve(context.workspaceRoot, options.karmaConfig), transforms.karmaOptions ? transforms.karmaOptions(karmaOptions) : karmaOptions, { promiseConfig: true, throwErrors: true });
     // Remove the webpack plugin/framework:
     // Alternative would be to make the Karma plugin "smart" but that's a tall order
     // with managing unneeded imports etc..
-    const pluginLengthBefore = (parsedKarmaConfig.plugins ?? []).length;
-    parsedKarmaConfig.plugins = (parsedKarmaConfig.plugins ?? []).filter((plugin) => {
+    parsedKarmaConfig.plugins ??= [];
+    const pluginLengthBefore = parsedKarmaConfig.plugins.length;
+    parsedKarmaConfig.plugins = parsedKarmaConfig.plugins.filter((plugin) => {
         if (typeof plugin === 'string') {
             return plugin !== 'framework:@angular-devkit/build-angular';
         }
         return !plugin['framework:@angular-devkit/build-angular'];
     });
-    parsedKarmaConfig.frameworks = parsedKarmaConfig.frameworks?.filter((framework) => framework !== '@angular-devkit/build-angular');
-    const pluginLengthAfter = (parsedKarmaConfig.plugins ?? []).length;
+    parsedKarmaConfig.frameworks ??= [];
+    parsedKarmaConfig.frameworks = parsedKarmaConfig.frameworks.filter((framework) => framework !== '@angular-devkit/build-angular');
+    const pluginLengthAfter = parsedKarmaConfig.plugins.length;
     if (pluginLengthBefore !== pluginLengthAfter) {
         context.logger.warn(`Ignoring framework "@angular-devkit/build-angular" from karma config file because it's not compatible with the application builder.`);
     }
+    parsedKarmaConfig.plugins.push(AngularAssetsMiddleware.createPlugin(buildOutput));
+    parsedKarmaConfig.middleware ??= [];
+    parsedKarmaConfig.middleware.push(AngularAssetsMiddleware.NAME);
     // When using code-coverage, auto-add karma-coverage.
     // This was done as part of the karma plugin for webpack.
     if (options.codeCoverage &&
         !parsedKarmaConfig.reporters?.some((r) => r === 'coverage' || r === 'coverage-istanbul')) {
         parsedKarmaConfig.reporters = (parsedKarmaConfig.reporters ?? []).concat(['coverage']);
     }
-    return [karma, parsedKarmaConfig, buildOptions];
+    return [karma, parsedKarmaConfig, buildOptions, buildIterator];
 }
 function hasChunkOrWorkerFiles(files) {
     return Object.keys(files).some((filename) => {
@@ -264,9 +346,17 @@ async function writeTestFiles(files, testDir) {
     });
 }
 /** Returns the first item yielded by the given generator and cancels the execution. */
-async function first(generator) {
+async function first(generator, { cancel }) {
+    if (!cancel) {
+        const iterator = generator[Symbol.asyncIterator]();
+        const firstValue = await iterator.next();
+        if (firstValue.done) {
+            throw new Error('Expected generator to emit at least once.');
+        }
+        return [firstValue.value, iterator];
+    }
     for await (const value of generator) {
-        return value;
+        return [value, null];
     }
     throw new Error('Expected generator to emit at least once.');
 }

package/src/utils/normalize-cache.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeCacheOptions = normalizeCacheOptions;
 const node_path_1 = require("node:path");
 /** Version placeholder is replaced during the build process with actual package version */
-const VERSION = '19.0.0-rc.0';
+const VERSION = '19.0.0-rc.2';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&