@angular-devkit/build-angular 15.0.0-next.1 → 15.0.0-next.3

package/src/webpack/configs/styles.js

@@ -37,8 +37,9 @@ exports.getStylesConfig = exports.resolveGlobalStyles = void 0;
 const fs = __importStar(require("fs"));
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const path = __importStar(require("path"));
-const webpack_1 = require("webpack");
 const sass_service_1 = require("../../sass/sass-service");
+const sass_service_legacy_1 = require("../../sass/sass-service-legacy");
+const environment_options_1 = require("../../utils/environment-options");
 const plugins_1 = require("../plugins");
 const css_optimizer_plugin_1 = require("../plugins/css-optimizer-plugin");
 const helpers_1 = require("../utils/helpers");
@@ -83,7 +84,7 @@ exports.resolveGlobalStyles = resolveGlobalStyles;
 // eslint-disable-next-line max-lines-per-function
 function getStylesConfig(wco) {
     var _a, _b, _c;
-    const { root, buildOptions } = wco;
+    const { root, projectRoot, buildOptions } = wco;
     const extraPlugins = [];
     extraPlugins.push(new plugins_1.AnyComponentStyleBudgetChecker(buildOptions.budgets));
     const cssSourceMap = buildOptions.sourceMap.styles;
@@ -97,23 +98,14 @@ function getStylesConfig(wco) {
         // Add plugin to remove hashes from lazy styles.
         extraPlugins.push(new plugins_1.RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
     }
-    if (globalStylePaths.some((p) => p.endsWith('.styl'))) {
-        wco.logger.warn('Stylus usage is deprecated and will be removed in a future major version. ' +
-            'To opt-out of the deprecated behaviour, please migrate to another stylesheet language.');
-    }
-    const sassImplementation = new sass_service_1.SassWorkerImplementation();
-    const sassTildeUsageMessage = new Set();
+    const sassImplementation = environment_options_1.useLegacySass
+        ? new sass_service_legacy_1.SassLegacyWorkerImplementation()
+        : new sass_service_1.SassWorkerImplementation();
     extraPlugins.push({
         apply(compiler) {
             compiler.hooks.shutdown.tap('sass-worker', () => {
                 sassImplementation.close();
             });
-            compiler.hooks.afterCompile.tap('sass-worker', (compilation) => {
-                for (const message of sassTildeUsageMessage) {
-                    compilation.warnings.push(new webpack_1.WebpackError(message));
-                }
-                sassTildeUsageMessage.clear();
-            });
         },
     });
     const assetNameTemplate = (0, helpers_1.assetNameTemplateFactory)(hashFormat);
@@ -151,7 +143,6 @@ function getStylesConfig(wco) {
                 : undefined,
             plugins: [
                 postcssImports({
-                    resolve: (url) => (url.startsWith('~') ? url.slice(1) : url),
                     load: (filename) => {
                         return new Promise((resolve, reject) => {
                             loader.fs.readFile(filename, (err, data) => {
@@ -247,30 +238,7 @@ function getStylesConfig(wco) {
                 },
                 {
                     loader: require.resolve('sass-loader'),
-                    options: {
-                        implementation: sassImplementation,
-                        sourceMap: true,
-                        sassOptions: {
-                            importer: (url, from) => {
-                                if (url.charAt(0) === '~') {
-                                    sassTildeUsageMessage.add(`'${from}' imports '${url}' with a tilde. Usage of '~' in imports is deprecated.`);
-                                }
-                                return null;
-                            },
-                            // Prevent use of `fibers` package as it no longer works in newer Node.js versions
-                            fiber: false,
-                            // 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: !buildOptions.verbose,
-                            verbose: buildOptions.verbose,
-                        },
-                    },
+                    options: getSassLoaderOptions(root, projectRoot, sassImplementation, includePaths, false, !buildOptions.verbose),
                 },
             ],
         },
@@ -285,31 +253,7 @@ function getStylesConfig(wco) {
                 },
                 {
                     loader: require.resolve('sass-loader'),
-                    options: {
-                        implementation: sassImplementation,
-                        sourceMap: true,
-                        sassOptions: {
-                            importer: (url, from) => {
-                                if (url.charAt(0) === '~') {
-                                    sassTildeUsageMessage.add(`'${from}' imports '${url}' with a tilde. Usage of '~' in imports is deprecated.`);
-                                }
-                                return null;
-                            },
-                            // Prevent use of `fibers` package as it no longer works in newer Node.js versions
-                            fiber: false,
-                            indentedSyntax: true,
-                            // 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: !buildOptions.verbose,
-                            verbose: buildOptions.verbose,
-                        },
-                    },
+                    options: getSassLoaderOptions(root, projectRoot, sassImplementation, includePaths, true, !buildOptions.verbose),
                 },
             ],
         },
@@ -329,22 +273,6 @@ function getStylesConfig(wco) {
                 },
             ],
         },
-        {
-            extensions: ['styl'],
-            use: [
-                {
-                    loader: require.resolve('stylus-loader'),
-                    options: {
-                        sourceMap: cssSourceMap,
-                        stylusOptions: {
-                            compress: false,
-                            sourceMap: { comment: false },
-                            paths: includePaths,
-                        },
-                    },
-                },
-            ],
-        },
     ];
     return {
         entry: entryPoints,
@@ -402,3 +330,58 @@ function getTailwindConfigPath({ projectRoot, root }) {
     }
     return undefined;
 }
+function getSassLoaderOptions(root, projectRoot, implementation, includePaths, indentedSyntax, verbose) {
+    return implementation instanceof sass_service_1.SassWorkerImplementation
+        ? {
+            sourceMap: true,
+            api: 'modern',
+            implementation,
+            // Webpack importer is only implemented in the legacy API.
+            // See: https://github.com/webpack-contrib/sass-loader/blob/997f3eb41d86dd00d5fa49c395a1aeb41573108c/src/utils.js#L642-L651
+            webpackImporter: false,
+            sassOptions: {
+                loadPaths: [
+                    ...includePaths,
+                    // Needed to resolve node packages and retain the same behaviour of with the legacy API as sass-loader resolves
+                    // scss also from the cwd and project root.
+                    // See: https://github.com/webpack-contrib/sass-loader/blob/997f3eb41d86dd00d5fa49c395a1aeb41573108c/src/utils.js#L307
+                    projectRoot,
+                    path.join(root, 'node_modules'),
+                ],
+                // 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',
+            },
+        }
+        : {
+            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,
+            },
+        };
+}

package/src/webpack/plugins/any-component-style-budget-checker.js

@@ -59,7 +59,7 @@ class AnyComponentStyleBudgetChecker {
                 if (!compilation.compiler.parentCompilation) {
                     return;
                 }
-                const cssExtensions = ['.css', '.scss', '.less', '.styl', '.sass'];
+                const cssExtensions = ['.css', '.scss', '.less', '.sass'];
                 const componentStyles = Object.keys(compilation.assets)
                     .filter((name) => cssExtensions.includes(path.extname(name)))
                     .map((name) => ({

package/src/webpack/plugins/css-optimizer-plugin.d.ts

@@ -32,5 +32,4 @@ export declare class CssOptimizerPlugin {
      */
     private optimize;
     private addWarnings;
-    private transformSupportedBrowsersToTargets;
 }

package/src/webpack/plugins/css-optimizer-plugin.js

@@ -8,6 +8,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CssOptimizerPlugin = void 0;
+const esbuild_targets_1 = require("../../utils/esbuild-targets");
 const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const esbuild_executor_1 = require("./esbuild-executor");
 /**
@@ -24,7 +25,7 @@ class CssOptimizerPlugin {
     constructor(options) {
         this.esbuild = new esbuild_executor_1.EsbuildExecutor();
         if (options === null || options === void 0 ? void 0 : options.supportedBrowsers) {
-            this.targets = this.transformSupportedBrowsersToTargets(options.supportedBrowsers);
+            this.targets = (0, esbuild_targets_1.transformSupportedBrowsersToTargets)(options.supportedBrowsers);
         }
     }
     apply(compiler) {
@@ -38,7 +39,7 @@ class CssOptimizerPlugin {
                 const cache = compilation.options.cache && compilation.getCache(PLUGIN_NAME);
                 logger.time('optimize css assets');
                 for (const assetName of Object.keys(compilationAssets)) {
-                    if (!/\.(?:css|scss|sass|less|styl)$/.test(assetName)) {
+                    if (!/\.(?:css|scss|sass|less)$/.test(assetName)) {
                         continue;
                     }
                     const asset = compilation.getAsset(assetName);
@@ -117,29 +118,5 @@ class CssOptimizerPlugin {
             }
         }
     }
-    transformSupportedBrowsersToTargets(supportedBrowsers) {
-        const transformed = [];
-        // https://esbuild.github.io/api/#target
-        const esBuildSupportedBrowsers = new Set(['safari', 'firefox', 'edge', 'chrome', 'ios']);
-        for (const browser of supportedBrowsers) {
-            let [browserName, version] = browser.split(' ');
-            // browserslist uses the name `ios_saf` for iOS Safari whereas esbuild uses `ios`
-            if (browserName === 'ios_saf') {
-                browserName = 'ios';
-            }
-            // browserslist uses ranges `15.2-15.3` versions but only the lowest is required
-            // to perform minimum supported feature checks. esbuild also expects a single version.
-            [version] = version.split('-');
-            if (esBuildSupportedBrowsers.has(browserName)) {
-                if (browserName === 'safari' && version === 'TP') {
-                    // esbuild only supports numeric versions so `TP` is converted to a high number (999) since
-                    // a Technology Preview (TP) of Safari is assumed to support all currently known features.
-                    version = '999';
-                }
-                transformed.push(browserName + version);
-            }
-        }
-        return transformed.length ? transformed : undefined;
-    }
 }
 exports.CssOptimizerPlugin = CssOptimizerPlugin;

package/src/webpack/plugins/hmr/hmr-loader.d.ts

@@ -6,4 +6,4 @@
  * found in the LICENSE file at https://angular.io/license
  */
 export declare const HmrLoader: string;
-export default function (this: any, content: string, map: any): void;
+export default function localizeExtractLoader(this: import('webpack').LoaderContext<{}>, content: string, map: Parameters<import('webpack').LoaderDefinitionFunction>[1]): void;

package/src/webpack/plugins/hmr/hmr-loader.js

@@ -11,10 +11,7 @@ exports.HmrLoader = void 0;
 const path_1 = require("path");
 exports.HmrLoader = __filename;
 const hmrAcceptPath = (0, path_1.join)(__dirname, './hmr-accept.js').replace(/\\/g, '/');
-function default_1(content, 
-// Source map types are broken in the webpack type definitions
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-map) {
+function localizeExtractLoader(content, map) {
     const source = `${content}
 
   // HMR Accept Code
@@ -24,4 +21,4 @@ map) {
     this.callback(null, source, map);
     return;
 }
-exports.default = default_1;
+exports.default = localizeExtractLoader;

package/src/webpack/plugins/javascript-optimizer-plugin.d.ts

@@ -5,7 +5,6 @@
  * 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 { ScriptTarget } from 'typescript';
 import type { Compiler } from 'webpack';
 /**
  * The options used to configure the {@link JavaScriptOptimizerPlugin}.
@@ -29,11 +28,9 @@ export interface JavaScriptOptimizerOptions {
      */
     sourcemap?: boolean;
     /**
-     * The ECMAScript version that should be used when generating output code.
-     * The optimizer will not adjust the output code with features present in newer
-     * ECMAScript versions.
+     * A list of supported browsers that is used for output code.
      */
-    target: ScriptTarget;
+    supportedBrowsers?: string[];
     /**
      * Enables the retention of identifier names and ensures that function and class names are
      * present in the output code.
@@ -61,7 +58,8 @@ export interface JavaScriptOptimizerOptions {
  * optimizations not yet implemented by `esbuild`.
  */
 export declare class JavaScriptOptimizerPlugin {
-    options: JavaScriptOptimizerOptions;
+    private options;
+    private targets;
     constructor(options: JavaScriptOptimizerOptions);
     apply(compiler: Compiler): void;
 }

package/src/webpack/plugins/javascript-optimizer-plugin.js

@@ -12,8 +12,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.JavaScriptOptimizerPlugin = void 0;
 const piscina_1 = __importDefault(require("piscina"));
-const typescript_1 = require("typescript");
 const environment_options_1 = require("../../utils/environment-options");
+const esbuild_targets_1 = require("../../utils/esbuild-targets");
+const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const esbuild_executor_1 = require("./esbuild-executor");
 /**
  * The maximum number of Workers that will be created to execute optimize tasks.
@@ -34,6 +35,9 @@ const PLUGIN_NAME = 'angular-javascript-optimizer';
 class JavaScriptOptimizerPlugin {
     constructor(options) {
         this.options = options;
+        if (options.supportedBrowsers) {
+            this.targets = (0, esbuild_targets_1.transformSupportedBrowsersToTargets)(options.supportedBrowsers);
+        }
     }
     apply(compiler) {
         const { OriginalSource, SourceMapSource } = compiler.webpack.sources;
@@ -90,25 +94,13 @@ class JavaScriptOptimizerPlugin {
                         define[key] = String(value);
                     }
                 }
-                let target = 2017;
-                if (this.options.target) {
-                    if (this.options.target <= typescript_1.ScriptTarget.ES5) {
-                        target = 5;
-                    }
-                    else if (this.options.target === typescript_1.ScriptTarget.ESNext) {
-                        target = 'next';
-                    }
-                    else {
-                        target = Number(typescript_1.ScriptTarget[this.options.target].slice(2));
-                    }
-                }
                 // Setup the options used by all worker tasks
                 const optimizeOptions = {
                     sourcemap: this.options.sourcemap,
                     define,
                     keepNames: this.options.keepNames,
                     keepIdentifierNames: this.options.keepIdentifierNames,
-                    target,
+                    target: this.targets,
                     removeLicenses: this.options.removeLicenses,
                     advanced: this.options.advanced,
                     // Perform a single native esbuild support check.
@@ -151,8 +143,7 @@ class JavaScriptOptimizerPlugin {
                                 source: optimizedAsset,
                             });
                         }, (error) => {
-                            const optimizationError = new compiler.webpack.WebpackError(`Optimization error [${name}]: ${error.stack || error.message}`);
-                            compilation.errors.push(optimizationError);
+                            (0, webpack_diagnostics_1.addError)(compilation, `Optimization error [${name}]: ${error.stack || error.message}`);
                         }));
                     }
                     await Promise.all(tasks);

package/src/webpack/plugins/javascript-optimizer-worker.d.ts

@@ -39,9 +39,10 @@ export interface OptimizeRequestOptions {
      */
     sourcemap?: boolean;
     /**
-     * Specifies the target ECMAScript version for the output code.
+     * Specifies the list of supported esbuild targets.
+     * @see: https://esbuild.github.io/api/#target
      */
-    target: 5 | 2015 | 2016 | 2017 | 2018 | 2019 | 2020 | 'next';
+    target?: string[];
     /**
      * Controls whether esbuild should only use the WASM-variant instead of trying to
      * use the native variant. Some platforms may not support the native-variant and

package/src/webpack/plugins/javascript-optimizer-worker.js

@@ -26,9 +26,7 @@ async function default_1({ asset, options }) {
     // esbuild is used as a first pass
     const esbuildResult = await optimizeWithEsbuild(asset.code, asset.name, options);
     // terser is used as a second pass
-    const terserResult = await optimizeWithTerser(asset.name, esbuildResult.code, options.sourcemap, 
-    // Terser only supports up to ES2020.
-    options.target === 'next' ? 2020 : options.target, options.advanced);
+    const terserResult = await optimizeWithTerser(asset.name, esbuildResult.code, options.sourcemap, options.advanced);
     // Merge intermediate sourcemaps with input sourcemap if enabled
     let fullSourcemap;
     if (options.sourcemap) {
@@ -56,49 +54,26 @@ exports.default = default_1;
  * @returns A promise that resolves with the optimized code, source map, and any warnings.
  */
 async function optimizeWithEsbuild(content, name, options) {
-    var _a;
     if (!esbuild) {
         esbuild = new esbuild_executor_1.EsbuildExecutor(options.alwaysUseWasm);
     }
-    let result;
-    try {
-        result = await esbuild.transform(content, {
-            minifyIdentifiers: !options.keepIdentifierNames,
-            minifySyntax: true,
-            // NOTE: Disabling whitespace ensures unused pure annotations are kept
-            minifyWhitespace: false,
-            pure: ['forwardRef'],
-            legalComments: options.removeLicenses ? 'none' : 'inline',
-            sourcefile: name,
-            sourcemap: options.sourcemap && 'external',
-            define: options.define,
-            // This option should always be disabled for browser builds as we don't rely on `.name`
-            // and causes deadcode to be retained which makes `NG_BUILD_MANGLE` unusable to investigate tree-shaking issues.
-            // We enable `keepNames` only for server builds as Domino relies on `.name`.
-            // Once we no longer rely on Domino for SSR we should be able to remove this.
-            keepNames: options.keepNames,
-            target: `es${options.target}`,
-        });
-    }
-    catch (error) {
-        const failure = error;
-        // If esbuild fails with only ES5 support errors, fallback to just terser.
-        // This will only happen if ES5 is the output target and a global script contains ES2015+ syntax.
-        // In that case, the global script is technically already invalid for the target environment but
-        // this is and has been considered a configuration issue. Global scripts must be compatible with
-        // the target environment.
-        if ((_a = failure.errors) === null || _a === void 0 ? void 0 : _a.every((error) => error.text.includes('to the configured target environment ("es5") is not supported yet'))) {
-            result = {
-                code: content,
-                map: '',
-                warnings: [],
-            };
-        }
-        else {
-            throw error;
-        }
-    }
-    return result;
+    return esbuild.transform(content, {
+        minifyIdentifiers: !options.keepIdentifierNames,
+        minifySyntax: true,
+        // NOTE: Disabling whitespace ensures unused pure annotations are kept
+        minifyWhitespace: false,
+        pure: ['forwardRef'],
+        legalComments: options.removeLicenses ? 'none' : 'inline',
+        sourcefile: name,
+        sourcemap: options.sourcemap && 'external',
+        define: options.define,
+        // This option should always be disabled for browser builds as we don't rely on `.name`
+        // and causes deadcode to be retained which makes `NG_BUILD_MANGLE` unusable to investigate tree-shaking issues.
+        // We enable `keepNames` only for server builds as Domino relies on `.name`.
+        // Once we no longer rely on Domino for SSR we should be able to remove this.
+        keepNames: options.keepNames,
+        target: options.target,
+    });
 }
 /**
  * Optimizes a JavaScript asset using terser.
@@ -106,17 +81,17 @@ async function optimizeWithEsbuild(content, name, options) {
  * @param name The name of the JavaScript asset. Used to generate source maps.
  * @param code The JavaScript asset source content to optimize.
  * @param sourcemaps If true, generate an output source map for the optimized code.
- * @param target Specifies the target ECMAScript version for the output code.
  * @param advanced Controls advanced optimizations.
  * @returns A promise that resolves with the optimized code and source map.
  */
-async function optimizeWithTerser(name, code, sourcemaps, target, advanced) {
+async function optimizeWithTerser(name, code, sourcemaps, advanced) {
     const result = await (0, terser_1.minify)({ [name]: code }, {
         compress: {
             passes: advanced ? 2 : 1,
             pure_getters: advanced,
         },
-        ecma: target,
+        // terser only supports up to ES2020
+        ecma: 2020,
         // esbuild in the first pass is used to minify identifiers instead of mangle here
         mangle: false,
         // esbuild in the first pass is used to minify function names

package/src/webpack/plugins/karma/karma.js

@@ -109,7 +109,6 @@ const init = (config, emitter) => {
     webpackConfig.output.path = `/${KARMA_APPLICATION_PATH}/`;
     webpackConfig.output.publicPath = `/${KARMA_APPLICATION_PATH}/`;
     const compiler = (0, webpack_1.default)(webpackConfig, (error, stats) => {
-        var _a;
         if (error) {
             throw error;
         }
@@ -122,10 +121,10 @@ const init = (config, emitter) => {
                 warnings: true,
             });
             logger.error((0, stats_1.statsErrorsToString)(statsJson, { colors: true }));
-            // Notify potential listeners of the compile error.
-            emitter.emit('compile_error', {
-                errors: (_a = statsJson.errors) === null || _a === void 0 ? void 0 : _a.map((e) => e.message),
-            });
+            if (config.singleRun) {
+                // Notify potential listeners of the compile error.
+                emitter.emit('load_error');
+            }
             // Finish Karma run early in case of compilation error.
             emitter.emit('run_complete', [], { exitCode: 1 });
             // Emit a failure build event if there are compilation errors.

package/src/webpack/plugins/transfer-size-plugin.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TransferSizePlugin = void 0;
 const util_1 = require("util");
 const zlib_1 = require("zlib");
+const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const brotliCompressAsync = (0, util_1.promisify)(zlib_1.brotliCompress);
 const PLUGIN_NAME = 'angular-transfer-size-estimator';
 class TransferSizePlugin {
@@ -37,7 +38,7 @@ class TransferSizePlugin {
                         }));
                     })
                         .catch((error) => {
-                        compilation.warnings.push(new compilation.compiler.webpack.WebpackError(`Unable to calculate estimated transfer size for '${assetName}'. Reason: ${error.message}`));
+                        (0, webpack_diagnostics_1.addWarning)(compilation, `Unable to calculate estimated transfer size for '${assetName}'. Reason: ${error.message}`);
                     }));
                 }
                 await Promise.all(actions);

package/src/webpack/plugins/typescript.js

@@ -11,52 +11,41 @@ exports.createIvyPlugin = void 0;
 const webpack_1 = require("@ngtools/webpack");
 const typescript_1 = require("typescript");
 function createIvyPlugin(wco, aot, tsconfig) {
-    const { buildOptions } = wco;
+    var _a, _b;
+    var _c;
+    const { buildOptions, tsConfig } = wco;
     const optimize = buildOptions.optimization.scripts;
     const compilerOptions = {
         sourceMap: buildOptions.sourceMap.scripts,
         declaration: false,
         declarationMap: false,
     };
+    if (tsConfig.options.target === undefined || tsConfig.options.target < typescript_1.ScriptTarget.ES2022) {
+        tsConfig.options.target = typescript_1.ScriptTarget.ES2022;
+        // If 'useDefineForClassFields' is already defined in the users project leave the value as is.
+        // Otherwise fallback to false due to https://github.com/microsoft/TypeScript/issues/45995
+        // which breaks the deprecated `@Effects` NGRX decorator and potentially other existing code as well.
+        (_a = (_c = tsConfig.options).useDefineForClassFields) !== null && _a !== void 0 ? _a : (_c.useDefineForClassFields = false);
+        wco.logger.warn('TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and ' +
+            '"false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. ' +
+            'For more information, see https://github.com/browserslist/browserslist');
+    }
     if (buildOptions.preserveSymlinks !== undefined) {
         compilerOptions.preserveSymlinks = buildOptions.preserveSymlinks;
     }
-    // Outputting ES2015 from TypeScript is the required minimum for the build optimizer passes.
-    // Downleveling to ES5 will occur after the build optimizer passes via babel which is the same
-    // as for third-party libraries. This greatly reduces the complexity of static analysis.
-    if (wco.scriptTarget < typescript_1.ScriptTarget.ES2015) {
-        compilerOptions.target = typescript_1.ScriptTarget.ES2015;
-        wco.logger.warn('DEPRECATED: ES5 output is deprecated. Please update TypeScript `target` compiler option to ES2015 or later.');
-    }
     const fileReplacements = {};
     if (buildOptions.fileReplacements) {
         for (const replacement of buildOptions.fileReplacements) {
             fileReplacements[replacement.replace] = replacement.with;
         }
     }
-    let inlineStyleFileExtension;
-    switch (buildOptions.inlineStyleLanguage) {
-        case 'less':
-            inlineStyleFileExtension = 'less';
-            break;
-        case 'sass':
-            inlineStyleFileExtension = 'sass';
-            break;
-        case 'scss':
-            inlineStyleFileExtension = 'scss';
-            break;
-        case 'css':
-        default:
-            inlineStyleFileExtension = 'css';
-            break;
-    }
     return new webpack_1.AngularWebpackPlugin({
         tsconfig,
         compilerOptions,
         fileReplacements,
         jitMode: !aot,
         emitNgModuleScope: !optimize,
-        inlineStyleFileExtension,
+        inlineStyleFileExtension: (_b = buildOptions.inlineStyleLanguage) !== null && _b !== void 0 ? _b : 'css',
     });
 }
 exports.createIvyPlugin = createIvyPlugin;

package/src/webpack/utils/helpers.d.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { ObjectPattern } from 'copy-webpack-plugin';
-import { ScriptTarget } from 'typescript';
 import type { Configuration, WebpackOptionsNormalized } from 'webpack';
 import { AssetPatternClass, OutputHashing, ScriptElement, StyleElement } from '../../builders/browser/schema';
 import { WebpackConfigOptions } from '../../utils/build-options';
@@ -29,6 +28,4 @@ export declare function globalScriptsByBundleName(root: string, scripts: ScriptE
     paths: string[];
 }[];
 export declare function assetPatterns(root: string, assets: AssetPatternClass[]): ObjectPattern[];
-export declare function externalizePackages(context: string, request: string | undefined, callback: (error?: Error, result?: string) => void): void;
 export declare function getStatsOptions(verbose?: boolean): WebpackStatsOptions;
-export declare function getMainFieldsAndConditionNames(target: ScriptTarget, platformServer: boolean): Pick<WebpackOptionsNormalized['resolve'], 'mainFields' | 'conditionNames'>;