@angular-devkit/build-angular 17.3.1 → 18.0.0-next.0

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.3.1",
+  "version": "18.0.0-next.0",
   "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.1703.1",
-    "@angular-devkit/build-webpack": "0.1703.1",
-    "@angular-devkit/core": "17.3.1",
-    "@babel/core": "7.24.0",
-    "@babel/generator": "7.23.6",
+    "@angular-devkit/architect": "0.1800.0-next.0",
+    "@angular-devkit/build-webpack": "0.1800.0-next.0",
+    "@angular-devkit/core": "18.0.0-next.0",
+    "@babel/core": "7.24.3",
+    "@babel/generator": "7.24.1",
     "@babel/helper-annotate-as-pure": "7.22.5",
     "@babel/helper-split-export-declaration": "7.22.6",
-    "@babel/plugin-transform-async-generator-functions": "7.23.9",
-    "@babel/plugin-transform-async-to-generator": "7.23.3",
-    "@babel/plugin-transform-runtime": "7.24.0",
-    "@babel/preset-env": "7.24.0",
-    "@babel/runtime": "7.24.0",
+    "@babel/plugin-transform-async-generator-functions": "7.24.3",
+    "@babel/plugin-transform-async-to-generator": "7.24.1",
+    "@babel/plugin-transform-runtime": "7.24.3",
+    "@babel/preset-env": "7.24.3",
+    "@babel/runtime": "7.24.1",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "17.3.1",
+    "@ngtools/webpack": "18.0.0-next.0",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.18",
@@ -30,15 +30,15 @@
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.22",
     "css-loader": "6.10.0",
-    "esbuild-wasm": "0.20.1",
+    "esbuild-wasm": "0.20.2",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.4",
     "http-proxy-middleware": "2.0.6",
-    "inquirer": "9.2.15",
+    "inquirer": "9.2.16",
     "jsonc-parser": "3.2.1",
     "karma-source-map-support": "1.4.0",
     "less": "4.2.0",
-    "less-loader": "11.1.0",
+    "less-loader": "12.2.0",
     "license-webpack-plugin": "4.0.2",
     "loader-utils": "3.2.1",
     "magic-string": "0.30.8",
@@ -49,41 +49,41 @@
     "parse5-html-rewriting-stream": "7.0.0",
     "picomatch": "4.0.1",
     "piscina": "4.4.0",
-    "postcss": "8.4.35",
+    "postcss": "8.4.37",
     "postcss-loader": "8.1.1",
     "resolve-url-loader": "5.0.0",
     "rxjs": "7.8.1",
-    "sass": "1.71.1",
+    "sass": "1.72.0",
     "sass-loader": "14.1.1",
     "semver": "7.6.0",
     "source-map-loader": "5.0.0",
     "source-map-support": "0.5.21",
-    "terser": "5.29.1",
+    "terser": "5.29.2",
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
-    "undici": "6.7.1",
-    "vite": "5.1.5",
-    "watchpack": "2.4.0",
-    "webpack": "5.90.3",
-    "webpack-dev-middleware": "6.1.1",
-    "webpack-dev-server": "4.15.1",
+    "undici": "6.9.0",
+    "vite": "5.2.2",
+    "watchpack": "2.4.1",
+    "webpack": "5.91.0",
+    "webpack-dev-middleware": "7.1.1",
+    "webpack-dev-server": "5.0.4",
     "webpack-merge": "5.10.0",
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.20.1"
+    "esbuild": "0.20.2"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/localize": "^17.0.0",
-    "@angular/platform-server": "^17.0.0",
-    "@angular/service-worker": "^17.0.0",
+    "@angular/compiler-cli": "^18.0.0-next.0",
+    "@angular/localize": "^18.0.0-next.0",
+    "@angular/platform-server": "^18.0.0-next.0",
+    "@angular/service-worker": "^18.0.0-next.0",
     "@web/test-runner": "^0.18.0",
     "browser-sync": "^3.0.2",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "karma": "^6.3.0",
-    "ng-packagr": "^17.0.0",
+    "ng-packagr": "^18.0.0-next.0",
     "protractor": "^7.0.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",
     "typescript": ">=5.2 <5.5"
@@ -135,7 +135,7 @@
     "url": "https://github.com/angular/angular-cli.git"
   },
   "engines": {
-    "node": "^18.13.0 || >=20.9.0",
+    "node": "^18.19.1 || >=20.11.1",
     "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
     "yarn": ">= 1.13.0"
   },

package/src/builders/app-shell/index.js

@@ -44,7 +44,7 @@ const spinner_1 = require("../../utils/spinner");
 async function _renderUniversal(options, context, browserResult, serverResult, spinner) {
     // Get browser target options.
     const browserTarget = (0, architect_1.targetFromTargetString)(options.browserTarget);
-    const rawBrowserOptions = (await context.getTargetOptions(browserTarget));
+    const rawBrowserOptions = await context.getTargetOptions(browserTarget);
     const browserBuilderName = await context.getBuilderNameForTarget(browserTarget);
     const browserOptions = await context.validateOptions(rawBrowserOptions, browserBuilderName);
     // Locate zone.js to load in the render worker

package/src/builders/application/build-action.d.ts

@@ -5,8 +5,7 @@
  * 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 { BuilderOutput } from '@angular-devkit/architect';
-import type { logging } from '@angular-devkit/core';
+import { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
 import { BuildOutputFile } from '../../tools/esbuild/bundler-context';
 import { ExecutionResult, RebuildState } from '../../tools/esbuild/bundler-execution-result';
 import { NormalizedCachedOptions } from '../../utils/normalize-cache';
@@ -16,7 +15,7 @@ export declare function runEsBuildBuildAction(action: (rebuildState?: RebuildSta
     workspaceRoot: string;
     projectRoot: string;
     outputOptions: NormalizedOutputOptions;
-    logger: logging.LoggerApi;
+    logger: BuilderContext['logger'];
     cacheOptions: NormalizedCachedOptions;
     writeToFileSystem: boolean;
     writeToFileSystemFilter: ((file: BuildOutputFile) => boolean) | undefined;

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

@@ -6,8 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 /// <reference types="node" />
-/// <reference types="@types/node/http" />
-/// <reference types="@types/node/ts4.8/http" />
 import type { BuilderContext } from '@angular-devkit/architect';
 import type { Plugin } from 'esbuild';
 import type http from 'node:http';

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

@@ -49,18 +49,25 @@ const supported_browsers_1 = require("../../utils/supported-browsers");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const application_1 = require("../application");
 const browser_esbuild_1 = require("../browser-esbuild");
+/**
+ * Build options that are also present on the dev server but are only passed
+ * to the build.
+ */
+const CONVENIENCE_BUILD_OPTIONS = ['watch', 'poll', 'verbose'];
 // eslint-disable-next-line max-lines-per-function
 async function* serveWithVite(serverOptions, builderName, context, transformers, extensions) {
     // Get the browser configuration from the target name.
-    const rawBrowserOptions = (await context.getTargetOptions(serverOptions.buildTarget));
+    const rawBrowserOptions = await context.getTargetOptions(serverOptions.buildTarget);
     // Deploy url is not used in the dev-server.
     delete rawBrowserOptions.deployUrl;
-    const browserOptions = (await context.validateOptions({
-        ...rawBrowserOptions,
-        watch: serverOptions.watch,
-        poll: serverOptions.poll,
-        verbose: serverOptions.verbose,
-    }, builderName));
+    // Copy convenience options to build
+    for (const optionName of CONVENIENCE_BUILD_OPTIONS) {
+        const optionValue = serverOptions[optionName];
+        if (optionValue !== undefined) {
+            rawBrowserOptions[optionName] = optionValue;
+        }
+    }
+    const browserOptions = await context.validateOptions(rawBrowserOptions, builderName);
     if (browserOptions.prerender || browserOptions.ssr) {
         // Disable prerendering if enabled and force SSR.
         // This is so instead of prerendering all the routes for every change, the page is "prerendered" when it is requested.

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

@@ -68,7 +68,7 @@ function serveWebpackBrowser(options, builderName, context, transforms = {}) {
       See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.`);
         }
         // Get the browser configuration from the target name.
-        const rawBrowserOptions = (await context.getTargetOptions(options.buildTarget));
+        const rawBrowserOptions = await context.getTargetOptions(options.buildTarget);
         if (rawBrowserOptions.outputHashing && rawBrowserOptions.outputHashing !== schema_1.OutputHashing.None) {
             // Disable output hashing for dev build as this can cause memory leaks
             // See: https://github.com/webpack/webpack-dev-server/issues/377#issuecomment-241258405

package/src/builders/prerender/index.d.ts

@@ -6,9 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
-import { json } from '@angular-devkit/core';
 import { Schema } from './schema';
-type PrerenderBuilderOptions = Schema & json.JsonObject;
+type PrerenderBuilderOptions = Schema;
 type PrerenderBuilderOutput = BuilderOutput;
 /**
  * Builds the browser and server, then renders each route in options.routes
@@ -16,5 +15,5 @@ type PrerenderBuilderOutput = BuilderOutput;
  * the browser result.
  */
 export declare function execute(options: PrerenderBuilderOptions, context: BuilderContext): Promise<PrerenderBuilderOutput>;
-declare const _default: import("../../../../architect/src/internal").Builder<Schema & json.JsonObject>;
+declare const _default: import("../../../../architect/src/internal").Builder<Schema & import("../../../../core/src").JsonObject>;
 export default _default;

package/src/builders/ssr-dev-server/utils.d.ts

@@ -5,8 +5,7 @@
  * 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
  */
-/// <reference types="@types/node/child_process" />
-/// <reference types="@types/node/ts4.8/child_process" />
+/// <reference types="node" />
 import { SpawnOptions } from 'child_process';
 import { Observable } from 'rxjs';
 export declare function getAvailablePort(): Promise<number>;

package/src/tools/babel/plugins/adjust-static-class-members.js

@@ -315,10 +315,7 @@ function default_1() {
                 if (!wrapDecorators || visitedClasses.has(classNode)) {
                     return;
                 }
-                if (!classNode.id ||
-                    !parentPath.isVariableDeclarator() ||
-                    !core_1.types.isIdentifier(parentPath.node.id) ||
-                    parentPath.node.id.name !== classNode.id.name) {
+                if (!parentPath.isVariableDeclarator() || !core_1.types.isIdentifier(parentPath.node.id)) {
                     return;
                 }
                 const origin = parentPath.parentPath;
@@ -338,10 +335,10 @@ function default_1() {
                 // Wrap class and safe static assignments in a pure annotated IIFE
                 const container = core_1.types.arrowFunctionExpression([], core_1.types.blockStatement([
                     core_1.types.variableDeclaration('let', [
-                        core_1.types.variableDeclarator(core_1.types.cloneNode(classNode.id), classNode),
+                        core_1.types.variableDeclarator(core_1.types.cloneNode(parentPath.node.id), classNode),
                     ]),
                     ...wrapStatementNodes,
-                    core_1.types.returnStatement(core_1.types.cloneNode(classNode.id)),
+                    core_1.types.returnStatement(core_1.types.cloneNode(parentPath.node.id)),
                 ]));
                 const replacementInitializer = core_1.types.callExpression(core_1.types.parenthesizedExpression(container), []);
                 (0, helper_annotate_as_pure_1.default)(replacementInitializer);

package/src/tools/esbuild/angular/compilation/parallel-worker.d.ts

@@ -6,8 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 /// <reference types="node" />
-/// <reference types="@types/node/worker_threads" />
-/// <reference types="@types/node/ts4.8/worker_threads" />
 import type { PartialMessage } from 'esbuild';
 import { type MessagePort } from 'node:worker_threads';
 import type { DiagnosticModes } from './angular-compilation';

package/src/tools/esbuild/utils.d.ts

@@ -5,7 +5,7 @@
  * 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 { logging } from '@angular-devkit/core';
+import { BuilderContext } from '@angular-devkit/architect';
 import { BuildOptions, Metafile, OutputFile } from 'esbuild';
 import { NormalizedApplicationBuildOptions, NormalizedOutputOptions } from '../../builders/application/options';
 import { BudgetCalculatorResult } from '../../utils/bundle-calculator';
@@ -38,4 +38,4 @@ export declare function transformSupportedBrowsersToTargets(supportedBrowsers: s
  */
 export declare function getSupportedNodeTargets(): string[];
 export declare function createJsonBuildManifest(result: ExecutionResult, normalizedOptions: NormalizedApplicationBuildOptions): Promise<string>;
-export declare function logMessages(logger: logging.LoggerApi, executionResult: ExecutionResult, color?: boolean, jsonLogs?: boolean): Promise<void>;
+export declare function logMessages(logger: BuilderContext['logger'], executionResult: ExecutionResult, color?: boolean, jsonLogs?: boolean): Promise<void>;

package/src/tools/esbuild/utils.js

@@ -331,7 +331,7 @@ function transformSupportedBrowsersToTargets(supportedBrowsers) {
     return transformed;
 }
 exports.transformSupportedBrowsersToTargets = transformSupportedBrowsersToTargets;
-const SUPPORTED_NODE_VERSIONS = '^18.13.0 || >=20.9.0';
+const SUPPORTED_NODE_VERSIONS = '^18.19.1 || >=20.11.1';
 /**
  * Transform supported Node.js versions to esbuild target.
  * @see https://esbuild.github.io/api/#target

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

@@ -159,9 +159,11 @@ function createAngularMemoryPlugin(options) {
                         return;
                     }
                     transformIndexHtmlAndAddHeaders(req.url, rawHtml, res, next, async (html) => {
+                        const resolvedUrls = server.resolvedUrls;
+                        const baseUrl = resolvedUrls?.local[0] ?? resolvedUrls?.network[0];
                         const { content } = await (0, render_page_1.renderPage)({
                             document: html,
-                            route: new URL(req.originalUrl ?? '/', server.resolvedUrls?.local[0]).toString(),
+                            route: new URL(req.originalUrl ?? '/', baseUrl).toString(),
                             serverContext: 'ssr',
                             loadBundle: (uri) => 
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -230,13 +232,11 @@ exports.createAngularMemoryPlugin = createAngularMemoryPlugin;
  */
 async function loadViteClientCode(file) {
     const originalContents = await (0, promises_1.readFile)(file, 'utf-8');
-    const firstUpdate = originalContents.replace('You can also disable this overlay by setting', '');
-    (0, node_assert_1.default)(originalContents !== firstUpdate, 'Failed to update Vite client error overlay text. (1)');
-    const secondUpdate = firstUpdate.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">${hmrConfigName}.</code>', '');
-    (0, node_assert_1.default)(firstUpdate !== secondUpdate, 'Failed to update Vite client error overlay text. (2)');
-    return secondUpdate;
+    const updatedContents = originalContents.replace(`h('br'), 'You can also disable this overlay by setting ', ` +
+        `h('code', { part: 'config-option-name' }, 'server.hmr.overlay'), '` +
+        ` to ', h('code', { part: 'config-option-value' }, 'false'), ' in ', h('code', { part: 'config-file-name' }, hmrConfigName), '.'`, '');
+    (0, node_assert_1.default)(originalContents !== updatedContents, 'Failed to update Vite client error overlay text.');
+    return updatedContents;
 }
 function pathnameWithoutBasePath(url, basePath) {
     const parsedUrl = new URL(url, 'http://localhost');

package/src/tools/webpack/configs/dev-server.js

@@ -162,12 +162,13 @@ async function addProxyConfig(root, proxyConfig) {
     if (!(0, fs_1.existsSync)(proxyPath)) {
         throw new Error(`Proxy configuration file ${proxyPath} does not exist.`);
     }
+    let proxyConfiguration;
     switch ((0, path_1.extname)(proxyPath)) {
         case '.json': {
             const content = await fs_1.promises.readFile(proxyPath, 'utf-8');
             const { parse, printParseErrorCode } = await Promise.resolve().then(() => __importStar(require('jsonc-parser')));
             const parseErrors = [];
-            const proxyConfiguration = parse(content, parseErrors, { allowTrailingComma: true });
+            proxyConfiguration = parse(content, parseErrors, { allowTrailingComma: true });
             if (parseErrors.length > 0) {
                 let errorMessage = `Proxy configuration file ${proxyPath} contains parse errors:`;
                 for (const parseError of parseErrors) {
@@ -176,32 +177,35 @@ async function addProxyConfig(root, proxyConfig) {
                 }
                 throw new Error(errorMessage);
             }
-            return proxyConfiguration;
+            break;
         }
         case '.mjs':
             // Load the ESM configuration file using the TypeScript dynamic import workaround.
             // Once TypeScript provides support for keeping the dynamic import this workaround can be
             // changed to a direct dynamic import.
-            return (await (0, load_esm_1.loadEsmModule)((0, url_1.pathToFileURL)(proxyPath))).default;
+            proxyConfiguration = (await (0, load_esm_1.loadEsmModule)((0, url_1.pathToFileURL)(proxyPath))).default;
+            break;
         case '.cjs':
-            return require(proxyPath);
+            proxyConfiguration = require(proxyPath);
+            break;
         default:
             // The file could be either CommonJS or ESM.
             // CommonJS is tried first then ESM if loading fails.
             try {
-                return require(proxyPath);
+                proxyConfiguration = require(proxyPath);
             }
             catch (e) {
                 (0, error_1.assertIsError)(e);
-                if (e.code === 'ERR_REQUIRE_ESM') {
-                    // Load the ESM configuration file using the TypeScript dynamic import workaround.
-                    // Once TypeScript provides support for keeping the dynamic import this workaround can be
-                    // changed to a direct dynamic import.
-                    return (await (0, load_esm_1.loadEsmModule)((0, url_1.pathToFileURL)(proxyPath))).default;
+                if (e.code !== 'ERR_REQUIRE_ESM') {
+                    throw e;
                 }
-                throw e;
+                // Load the ESM configuration file using the TypeScript dynamic import workaround.
+                // Once TypeScript provides support for keeping the dynamic import this workaround can be
+                // changed to a direct dynamic import.
+                proxyConfiguration = (await (0, load_esm_1.loadEsmModule)((0, url_1.pathToFileURL)(proxyPath))).default;
             }
     }
+    return normalizeProxyConfiguration(proxyConfiguration);
 }
 /**
  * Calculates the line and column for an error offset in the content of a JSON file.
@@ -301,3 +305,8 @@ function getPublicHostOptions(options, webSocketPath) {
     }
     return `auto://${publicHost || '0.0.0.0:0'}${webSocketPath}`;
 }
+function normalizeProxyConfiguration(proxy) {
+    return Array.isArray(proxy)
+        ? proxy
+        : Object.entries(proxy).map(([context, value]) => ({ context: [context], ...value }));
+}

package/src/tools/webpack/configs/styles.js

@@ -37,10 +37,8 @@ exports.getStylesConfig = void 0;
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const path = __importStar(require("node:path"));
 const node_url_1 = require("node:url");
-const environment_options_1 = require("../../../utils/environment-options");
 const tailwind_1 = require("../../../utils/tailwind");
 const sass_service_1 = require("../../sass/sass-service");
-const sass_service_legacy_1 = require("../../sass/sass-service-legacy");
 const plugins_1 = require("../plugins");
 const css_optimizer_plugin_1 = require("../plugins/css-optimizer-plugin");
 const styles_webpack_plugin_1 = require("../plugins/styles-webpack-plugin");
@@ -68,9 +66,7 @@ async function getStylesConfig(wco) {
             extraPlugins.push(new plugins_1.RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
         }
     }
-    const sassImplementation = environment_options_1.useLegacySass
-        ? new sass_service_legacy_1.SassLegacyWorkerImplementation()
-        : new sass_service_1.SassWorkerImplementation();
+    const sassImplementation = new sass_service_1.SassWorkerImplementation();
     extraPlugins.push({
         apply(compiler) {
             compiler.hooks.shutdown.tap('sass-worker', () => {
@@ -284,54 +280,27 @@ async function getStylesConfig(wco) {
 }
 exports.getStylesConfig = getStylesConfig;
 function getSassLoaderOptions(root, implementation, includePaths, indentedSyntax, verbose, preserveSymlinks) {
-    return implementation instanceof sass_service_1.SassWorkerImplementation
-        ? {
-            sourceMap: true,
-            api: 'modern',
-            implementation,
-            // Webpack importer is only implemented in the legacy API and we have our own custom Webpack importer.
-            // See: https://github.com/webpack-contrib/sass-loader/blob/997f3eb41d86dd00d5fa49c395a1aeb41573108c/src/utils.js#L642-L651
-            webpackImporter: false,
-            sassOptions: (loaderContext) => ({
-                importers: [getSassResolutionImporter(loaderContext, root, preserveSymlinks)],
-                loadPaths: includePaths,
-                // Use expanded as otherwise sass will remove comments that are needed for autoprefixer
-                // Ex: /* autoprefixer grid: autoplace */
-                // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
-                style: 'expanded',
-                // Silences compiler warnings from 3rd party stylesheets
-                quietDeps: !verbose,
-                verbose,
-                syntax: indentedSyntax ? 'indented' : 'scss',
-                sourceMapIncludeSources: true,
-            }),
-        }
-        : {
-            sourceMap: true,
-            api: 'legacy',
-            implementation,
-            sassOptions: {
-                importer: (url, from) => {
-                    if (url.charAt(0) === '~') {
-                        throw new Error(`'${from}' imports '${url}' with a tilde. Usage of '~' in imports is no longer supported.`);
-                    }
-                    return null;
-                },
-                // Prevent use of `fibers` package as it no longer works in newer Node.js versions
-                fiber: false,
-                indentedSyntax,
-                // bootstrap-sass requires a minimum precision of 8
-                precision: 8,
-                includePaths,
-                // Use expanded as otherwise sass will remove comments that are needed for autoprefixer
-                // Ex: /* autoprefixer grid: autoplace */
-                // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
-                outputStyle: 'expanded',
-                // Silences compiler warnings from 3rd party stylesheets
-                quietDeps: !verbose,
-                verbose,
-            },
-        };
+    return {
+        sourceMap: true,
+        api: 'modern',
+        implementation,
+        // Webpack importer is only implemented in the legacy API and we have our own custom Webpack importer.
+        // See: https://github.com/webpack-contrib/sass-loader/blob/997f3eb41d86dd00d5fa49c395a1aeb41573108c/src/utils.js#L642-L651
+        webpackImporter: false,
+        sassOptions: (loaderContext) => ({
+            importers: [getSassResolutionImporter(loaderContext, root, preserveSymlinks)],
+            loadPaths: includePaths,
+            // Use expanded as otherwise sass will remove comments that are needed for autoprefixer
+            // Ex: /* autoprefixer grid: autoplace */
+            // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
+            style: 'expanded',
+            // Silences compiler warnings from 3rd party stylesheets
+            quietDeps: !verbose,
+            verbose,
+            syntax: indentedSyntax ? 'indented' : 'scss',
+            sourceMapIncludeSources: true,
+        }),
+    };
 }
 function getSassResolutionImporter(loaderContext, root, preserveSymlinks) {
     const commonResolverOptions = {

package/src/tools/webpack/plugins/builder-watch-plugin.js

@@ -51,7 +51,7 @@ class BuilderWatchFileSystem {
                 const directoryChanges = new Set();
                 const missingChanges = new Set();
                 for (const event of events) {
-                    this.inputFileSystem.purge?.(event.path);
+                    this.inputFileSystem?.purge?.(event.path);
                     if (event.type === 'deleted') {
                         timeInfo.delete(event.path);
                         removals.add(event.path);
@@ -70,7 +70,7 @@ class BuilderWatchFileSystem {
                     }
                 }
                 const timeInfoMap = new Map(timeInfo);
-                callback(undefined, timeInfoMap, timeInfoMap, new Set([...fileChanges, ...directoryChanges, ...missingChanges]), removals);
+                callback(null, timeInfoMap, timeInfoMap, new Set([...fileChanges, ...directoryChanges, ...missingChanges]), removals);
             });
         });
         return {

package/src/tools/webpack/plugins/styles-webpack-plugin.js

@@ -34,7 +34,7 @@ class StylesWebpackPlugin {
             preferRelative: true,
             useSyncFileSystemCalls: true,
             symlinks: !preserveSymlinks,
-            fileSystem: compiler.inputFileSystem,
+            fileSystem: compiler.inputFileSystem ?? undefined,
         });
         const webpackOptions = compiler.options;
         compiler.hooks.environment.tap(PLUGIN_NAME, () => {

package/src/utils/environment-options.d.ts

@@ -10,7 +10,6 @@ export declare const shouldBeautify: boolean;
 export declare const allowMinify: boolean;
 export declare const maxWorkers: number;
 export declare const useParallelTs: boolean;
-export declare const useLegacySass: boolean;
 export declare const debugPerformance: boolean;
 export declare const shouldWatchRoot: boolean;
 export declare const useTypeChecking: boolean;

package/src/utils/environment-options.js

@@ -7,8 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useJSONBuildLogs = exports.useTypeChecking = exports.shouldWatchRoot = exports.debugPerformance = exports.useLegacySass = exports.useParallelTs = exports.maxWorkers = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
-const color_1 = require("./color");
+exports.useJSONBuildLogs = exports.useTypeChecking = exports.shouldWatchRoot = exports.debugPerformance = exports.useParallelTs = exports.maxWorkers = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
 function isDisabled(variable) {
     return variable === '0' || variable.toLowerCase() === 'false';
 }
@@ -70,15 +69,6 @@ const maxWorkersVariable = process.env['NG_BUILD_MAX_WORKERS'];
 exports.maxWorkers = isPresent(maxWorkersVariable) ? +maxWorkersVariable : 4;
 const parallelTsVariable = process.env['NG_BUILD_PARALLEL_TS'];
 exports.useParallelTs = !isPresent(parallelTsVariable) || !isDisabled(parallelTsVariable);
-const legacySassVariable = process.env['NG_BUILD_LEGACY_SASS'];
-exports.useLegacySass = (() => {
-    if (!isPresent(legacySassVariable)) {
-        return false;
-    }
-    // eslint-disable-next-line no-console
-    console.warn(color_1.colors.yellow(`Warning: 'NG_BUILD_LEGACY_SASS' environment variable support will be removed in version 16.`));
-    return isEnabled(legacySassVariable);
-})();
 const debugPerfVariable = process.env['NG_BUILD_DEBUG_PERF'];
 exports.debugPerformance = isPresent(debugPerfVariable) && isEnabled(debugPerfVariable);
 const watchRootVariable = process.env['NG_BUILD_WATCH_ROOT'];

package/src/utils/i18n-options.d.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { BuilderContext } from '@angular-devkit/architect';
-import { json } from '@angular-devkit/core';
 import { Schema as BrowserBuilderSchema, I18NTranslation } from '../builders/browser/schema';
 import { Schema as ServerBuilderSchema } from '../builders/server/schema';
 import { TranslationLoader } from './load-translations';
@@ -28,7 +27,9 @@ export interface I18nOptions {
     readonly shouldInline: boolean;
     hasDefinedSourceLocale?: boolean;
 }
-export declare function createI18nOptions(metadata: json.JsonObject, inline?: boolean | string[]): I18nOptions;
+export declare function createI18nOptions(projectMetadata: {
+    i18n?: unknown;
+}, inline?: boolean | string[]): I18nOptions;
 export declare function configureI18nBuild<T extends BrowserBuilderSchema | ServerBuilderSchema>(context: BuilderContext, options: T): Promise<{
     buildOptions: T;
     i18n: I18nOptions;