@angular-devkit/build-angular 15.1.0-next.2 → 15.1.0-next.3

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "15.1.0-next.2",
+  "version": "15.1.0-next.3",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.0",
-    "@angular-devkit/architect": "0.1501.0-next.2",
-    "@angular-devkit/build-webpack": "0.1501.0-next.2",
-    "@angular-devkit/core": "15.1.0-next.2",
+    "@angular-devkit/architect": "0.1501.0-next.3",
+    "@angular-devkit/build-webpack": "0.1501.0-next.3",
+    "@angular-devkit/core": "15.1.0-next.3",
     "@babel/core": "7.20.5",
     "@babel/generator": "7.20.5",
     "@babel/helper-annotate-as-pure": "7.18.6",
@@ -20,7 +20,7 @@
     "@babel/runtime": "7.20.6",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "15.1.0-next.2",
+    "@ngtools/webpack": "15.1.0-next.3",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.13",
     "babel-loader": "9.1.0",
@@ -30,8 +30,8 @@
     "chokidar": "3.5.3",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
-    "css-loader": "6.7.2",
-    "esbuild-wasm": "0.16.2",
+    "css-loader": "6.7.3",
+    "esbuild-wasm": "0.16.6",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
@@ -47,11 +47,11 @@
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.2.0",
-    "postcss": "8.4.19",
+    "postcss": "8.4.20",
     "postcss-loader": "7.0.2",
     "resolve-url-loader": "5.0.0",
     "rxjs": "6.6.7",
-    "sass": "1.56.1",
+    "sass": "1.56.2",
     "sass-loader": "13.2.0",
     "semver": "7.3.8",
     "source-map-loader": "4.0.1",
@@ -67,7 +67,7 @@
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.16.2"
+    "esbuild": "0.16.6"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^15.0.0-next",

package/src/babel/presets/application.js

@@ -139,7 +139,7 @@ function default_1(api, options) {
         // downlevel class properties by ensuring the class properties Babel plugin
         // is always included- regardless of the preset-env targets.
         if (options.supportedBrowsers.some((b) => safariClassFieldScopeBugBrowsers.has(b))) {
-            includePlugins.push('@babel/plugin-proposal-class-properties');
+            includePlugins.push('@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-private-methods');
         }
         presets.push([
             require('@babel/preset-env').default,

package/src/builders/browser-esbuild/compiler-plugin.d.ts

@@ -22,4 +22,6 @@ export interface CompilerPluginOptions {
     fileReplacements?: Record<string, string>;
     sourceFileCache?: SourceFileCache;
 }
-export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, styleOptions: BundleStylesheetOptions): Plugin;
+export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, styleOptions: BundleStylesheetOptions & {
+    inlineStyleLanguage: string;
+}): Plugin;

package/src/builders/browser-esbuild/compiler-plugin.js

@@ -44,6 +44,10 @@ const angular_compilation_1 = require("./angular-compilation");
 const javascript_transformer_1 = require("./javascript-transformer");
 const profiling_1 = require("./profiling");
 const stylesheets_1 = require("./stylesheets");
+/**
+ * A counter for component styles used to generate unique build-time identifiers for each stylesheet.
+ */
+let componentStyleCounter = 0;
 /**
  * Converts TypeScript Diagnostic related information into an esbuild compatible note object.
  * Related information is a subset of a full TypeScript Diagnostic and also used for diagnostic
@@ -149,6 +153,10 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     // Skip keys that have been manually provided
                     continue;
                 }
+                if (key === 'ngDevMode') {
+                    // ngDevMode is already set based on the builder's script optimization option
+                    continue;
+                }
                 // esbuild requires values to be a string (actual strings need to be quoted).
                 // In this case, all provided values are booleans.
                 build.initialOptions.define[key] = value.toString();
@@ -213,18 +221,9 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         var _a, _b;
                         // Stylesheet file only exists for external stylesheets
                         const filename = stylesheetFile !== null && stylesheetFile !== void 0 ? stylesheetFile : containingFile;
-                        // Temporary workaround for lack of virtual file support in the Sass plugin.
-                        // External Sass stylesheets are transformed using the file instead of the already read content.
-                        let stylesheetResult;
-                        if (filename.endsWith('.scss') || filename.endsWith('.sass')) {
-                            stylesheetResult = await (0, stylesheets_1.bundleStylesheetFile)(filename, styleOptions);
-                        }
-                        else {
-                            stylesheetResult = await (0, stylesheets_1.bundleStylesheetText)(data, {
-                                resolvePath: path.dirname(filename),
-                                virtualName: filename,
-                            }, styleOptions);
-                        }
+                        const stylesheetResult = await (0, stylesheets_1.bundleComponentStylesheet)(
+                        // TODO: Evaluate usage of a fast hash instead
+                        `${++componentStyleCounter}`, styleOptions.inlineStyleLanguage, data, filename, !stylesheetFile, styleOptions);
                         const { contents, resourceFiles, errors, warnings } = stylesheetResult;
                         ((_a = result.errors) !== null && _a !== void 0 ? _a : (result.errors = [])).push(...errors);
                         ((_b = result.warnings) !== null && _b !== void 0 ? _b : (result.warnings = [])).push(...warnings);

package/src/builders/browser-esbuild/experimental-warnings.js

@@ -20,10 +20,6 @@ const UNSUPPORTED_OPTIONS = [
     // The following two have no effect when localize is not enabled
     // 'i18nDuplicateTranslation',
     // 'i18nMissingTranslation',
-    // * Stylesheet preprocessor support
-    'inlineStyleLanguage',
-    // The following option has no effect until preprocessors are supported
-    // 'stylePreprocessorOptions',
     // * Deprecated
     'deployUrl',
     // * Always enabled with esbuild
@@ -49,10 +45,10 @@ function logExperimentalWarnings(options, context) {
         if (typeof value === 'object' && Object.keys(value).length === 0) {
             continue;
         }
-        if (unsupportedOption === 'inlineStyleLanguage' && value === 'css') {
-            continue;
-        }
         context.logger.warn(`The '${unsupportedOption}' option is currently unsupported by this experimental builder and will be ignored.`);
     }
+    if (options.inlineStyleLanguage === 'less') {
+        context.logger.warn('The less stylesheet preprocessor is not currently supported.');
+    }
 }
 exports.logExperimentalWarnings = logExperimentalWarnings;

package/src/builders/browser-esbuild/index.js

@@ -180,7 +180,7 @@ function createOutputFileFromText(path, text) {
     };
 }
 function createCodeBundleOptions(options, target, sourceFileCache) {
-    const { workspaceRoot, entryPoints, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, } = options;
+    const { workspaceRoot, entryPoints, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, } = options;
     return {
         absWorkingDir: workspaceRoot,
         bundle: true,
@@ -229,10 +229,15 @@ function createCodeBundleOptions(options, target, sourceFileCache) {
                 includePaths: stylePreprocessorOptions === null || stylePreprocessorOptions === void 0 ? void 0 : stylePreprocessorOptions.includePaths,
                 externalDependencies,
                 target,
+                inlineStyleLanguage,
             }),
         ],
         define: {
+            // Only set to false when script optimizations are enabled. It should not be set to true because
+            // Angular turns `ngDevMode` into an object for development debugging purposes when not defined
+            // which a constant true value would break.
             ...(optimizationOptions.scripts ? { 'ngDevMode': 'false' } : undefined),
+            // Only AOT mode is supported currently
             'ngJitMode': 'false',
         },
     };

package/src/builders/browser-esbuild/javascript-transformer-worker.js

@@ -25,7 +25,7 @@ exports.default = transformJavaScript;
 let linkerPluginCreator;
 async function transformWithBabel({ filename, data, ...options }) {
     var _a, _b;
-    const forceAsyncTransformation = (_a = options.forceAsyncTransformation) !== null && _a !== void 0 ? _a : (!/[\\/][_f]?esm2015[\\/]/.test(filename) && /async\s+function\s*\*/.test(data));
+    const forceAsyncTransformation = (_a = options.forceAsyncTransformation) !== null && _a !== void 0 ? _a : (!/[\\/][_f]?esm2015[\\/]/.test(filename) && /async(?:\s+function)?\s*\*/.test(data));
     const shouldLink = !options.skipLinker && (await (0, webpack_loader_1.requiresLinking)(filename, data));
     const useInputSourcemap = options.sourcemap &&
         (!!options.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(filename));

package/src/builders/browser-esbuild/javascript-transformer.js

@@ -75,8 +75,8 @@ class JavaScriptTransformer {
         let forceAsyncTransformation;
         if (skipLinker && !__classPrivateFieldGet(this, _JavaScriptTransformer_commonOptions, "f").advancedOptimizations) {
             // If the linker is being skipped and no optimizations are needed, only async transformation is left.
-            // This checks for async generator functions. All other async transformation is handled by esbuild.
-            forceAsyncTransformation = data.includes('async') && /async\s+function\s*\*/.test(data);
+            // This checks for async generator functions and class methods. All other async transformation is handled by esbuild.
+            forceAsyncTransformation = data.includes('async') && /async(?:\s+function)?\s*\*/.test(data);
             if (!forceAsyncTransformation) {
                 return Buffer.from(data, 'utf-8');
             }

package/src/builders/browser-esbuild/options.d.ts

@@ -24,6 +24,7 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     cacheOptions: import("../../utils/normalize-cache").NormalizedCachedOptions;
     crossOrigin: import("./schema").CrossOrigin | undefined;
     externalDependencies: string[] | undefined;
+    inlineStyleLanguage: string;
     poll: number | undefined;
     preserveSymlinks: boolean;
     stylePreprocessorOptions: import("./schema").StylePreprocessorOptions | undefined;

package/src/builders/browser-esbuild/options.js

@@ -122,7 +122,7 @@ async function normalizeOptions(context, projectName, options) {
         };
     }
     // Initial options to keep
-    const { baseHref, buildOptimizer, crossOrigin, externalDependencies, poll, preserveSymlinks, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, } = options;
+    const { baseHref, buildOptimizer, crossOrigin, externalDependencies, inlineStyleLanguage = 'css', poll, preserveSymlinks, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, } = options;
     // Return all the normalized options
     return {
         advancedOptimizations: buildOptimizer,
@@ -130,6 +130,7 @@ async function normalizeOptions(context, projectName, options) {
         cacheOptions,
         crossOrigin,
         externalDependencies,
+        inlineStyleLanguage,
         poll,
         // If not explicitly set, default to the Node.js process argument
         preserveSymlinks: preserveSymlinks !== null && preserveSymlinks !== void 0 ? preserveSymlinks : process.execArgv.includes('--preserve-symlinks'),

package/src/builders/browser-esbuild/sass-plugin.d.ts

@@ -6,8 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { Plugin } from 'esbuild';
-export declare function shutdownSassWorkerPool(): void;
-export declare function createSassPlugin(options: {
+export interface SassPluginOptions {
     sourcemap: boolean;
     loadPaths?: string[];
-}): Plugin;
+    inlineComponentData?: Record<string, string>;
+}
+export declare function shutdownSassWorkerPool(): void;
+export declare function createSassPlugin(options: SassPluginOptions): Plugin;

package/src/builders/browser-esbuild/sass-plugin.js

@@ -6,8 +6,12 @@
  * 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.createSassPlugin = exports.shutdownSassWorkerPool = void 0;
+const node_assert_1 = __importDefault(require("node:assert"));
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
@@ -46,86 +50,95 @@ function createSassPlugin(options) {
                 }
                 return result;
             };
+            build.onLoad({ filter: /^angular:styles\/component;s[ac]ss;/, namespace: 'angular:styles/component' }, async (args) => {
+                var _a;
+                const data = (_a = options.inlineComponentData) === null || _a === void 0 ? void 0 : _a[args.path];
+                (0, node_assert_1.default)(data, `component style name should always be found [${args.path}]`);
+                const [, language, , filePath] = args.path.split(';', 4);
+                const syntax = language === 'sass' ? 'indented' : 'scss';
+                return compileString(data, filePath, syntax, options, resolveUrl);
+            });
             build.onLoad({ filter: /\.s[ac]ss$/ }, async (args) => {
-                // Lazily load Sass when a Sass file is found
-                sassWorkerPool !== null && sassWorkerPool !== void 0 ? sassWorkerPool : (sassWorkerPool = new sass_service_1.SassWorkerImplementation(true));
-                const warnings = [];
-                try {
-                    const data = await (0, promises_1.readFile)(args.path, 'utf-8');
-                    const { css, sourceMap, loadedUrls } = await sassWorkerPool.compileStringAsync(data, {
-                        url: (0, node_url_1.pathToFileURL)(args.path),
-                        style: 'expanded',
-                        loadPaths: options.loadPaths,
-                        sourceMap: options.sourcemap,
-                        sourceMapIncludeSources: options.sourcemap,
-                        quietDeps: true,
-                        importers: [
-                            {
-                                findFileUrl: async (url, { previousResolvedModules }) => {
-                                    const result = await resolveUrl(url, previousResolvedModules);
-                                    // Check for package deep imports
-                                    if (!result.path) {
-                                        const parts = url.split('/');
-                                        const hasScope = parts.length >= 2 && parts[0].startsWith('@');
-                                        const [nameOrScope, nameOrFirstPath, ...pathPart] = parts;
-                                        const packageName = hasScope
-                                            ? `${nameOrScope}/${nameOrFirstPath}`
-                                            : nameOrScope;
-                                        const packageResult = await resolveUrl(packageName + '/package.json', previousResolvedModules);
-                                        if (packageResult.path) {
-                                            return (0, node_url_1.pathToFileURL)((0, node_path_1.join)((0, node_path_1.dirname)(packageResult.path), !hasScope ? nameOrFirstPath : '', ...pathPart));
-                                        }
-                                    }
-                                    return result.path ? (0, node_url_1.pathToFileURL)(result.path) : null;
-                                },
-                            },
-                        ],
-                        logger: {
-                            warn: (text, { deprecation, span }) => {
-                                warnings.push({
-                                    text: deprecation ? 'Deprecation' : text,
-                                    location: span && {
-                                        file: span.url && (0, node_url_1.fileURLToPath)(span.url),
-                                        lineText: span.context,
-                                        // Sass line numbers are 0-based while esbuild's are 1-based
-                                        line: span.start.line + 1,
-                                        column: span.start.column,
-                                    },
-                                    notes: deprecation ? [{ text }] : undefined,
-                                });
-                            },
-                        },
-                    });
-                    return {
-                        loader: 'css',
-                        contents: sourceMap
-                            ? `${css}\n${sourceMapToUrlComment(sourceMap, (0, node_path_1.dirname)(args.path))}`
-                            : css,
-                        watchFiles: loadedUrls.map((url) => (0, node_url_1.fileURLToPath)(url)),
-                        warnings,
-                    };
-                }
-                catch (error) {
-                    if (isSassException(error)) {
-                        const file = error.span.url ? (0, node_url_1.fileURLToPath)(error.span.url) : undefined;
-                        return {
-                            loader: 'css',
-                            errors: [
-                                {
-                                    text: error.message,
-                                },
-                            ],
-                            warnings,
-                            watchFiles: file ? [file] : undefined,
-                        };
-                    }
-                    throw error;
-                }
+                const data = await (0, promises_1.readFile)(args.path, 'utf-8');
+                const syntax = (0, node_path_1.extname)(args.path).toLowerCase() === '.sass' ? 'indented' : 'scss';
+                return compileString(data, args.path, syntax, options, resolveUrl);
             });
         },
     };
 }
 exports.createSassPlugin = createSassPlugin;
+async function compileString(data, filePath, syntax, options, resolveUrl) {
+    // Lazily load Sass when a Sass file is found
+    sassWorkerPool !== null && sassWorkerPool !== void 0 ? sassWorkerPool : (sassWorkerPool = new sass_service_1.SassWorkerImplementation(true));
+    const warnings = [];
+    try {
+        const { css, sourceMap, loadedUrls } = await sassWorkerPool.compileStringAsync(data, {
+            url: (0, node_url_1.pathToFileURL)(filePath),
+            style: 'expanded',
+            syntax,
+            loadPaths: options.loadPaths,
+            sourceMap: options.sourcemap,
+            sourceMapIncludeSources: options.sourcemap,
+            quietDeps: true,
+            importers: [
+                {
+                    findFileUrl: async (url, { previousResolvedModules }) => {
+                        const result = await resolveUrl(url, previousResolvedModules);
+                        // Check for package deep imports
+                        if (!result.path) {
+                            const parts = url.split('/');
+                            const hasScope = parts.length >= 2 && parts[0].startsWith('@');
+                            const [nameOrScope, nameOrFirstPath, ...pathPart] = parts;
+                            const packageName = hasScope ? `${nameOrScope}/${nameOrFirstPath}` : nameOrScope;
+                            const packageResult = await resolveUrl(packageName + '/package.json', previousResolvedModules);
+                            if (packageResult.path) {
+                                return (0, node_url_1.pathToFileURL)((0, node_path_1.join)((0, node_path_1.dirname)(packageResult.path), !hasScope ? nameOrFirstPath : '', ...pathPart));
+                            }
+                        }
+                        return result.path ? (0, node_url_1.pathToFileURL)(result.path) : null;
+                    },
+                },
+            ],
+            logger: {
+                warn: (text, { deprecation, span }) => {
+                    warnings.push({
+                        text: deprecation ? 'Deprecation' : text,
+                        location: span && {
+                            file: span.url && (0, node_url_1.fileURLToPath)(span.url),
+                            lineText: span.context,
+                            // Sass line numbers are 0-based while esbuild's are 1-based
+                            line: span.start.line + 1,
+                            column: span.start.column,
+                        },
+                        notes: deprecation ? [{ text }] : undefined,
+                    });
+                },
+            },
+        });
+        return {
+            loader: 'css',
+            contents: sourceMap ? `${css}\n${sourceMapToUrlComment(sourceMap, (0, node_path_1.dirname)(filePath))}` : css,
+            watchFiles: loadedUrls.map((url) => (0, node_url_1.fileURLToPath)(url)),
+            warnings,
+        };
+    }
+    catch (error) {
+        if (isSassException(error)) {
+            const file = error.span.url ? (0, node_url_1.fileURLToPath)(error.span.url) : undefined;
+            return {
+                loader: 'css',
+                errors: [
+                    {
+                        text: error.message,
+                    },
+                ],
+                warnings,
+                watchFiles: file ? [file] : undefined,
+            };
+        }
+        throw error;
+    }
+}
 function sourceMapToUrlComment(sourceMap, root) {
     // Remove `file` protocol from all sourcemap sources and adjust to be relative to the input file.
     // This allows esbuild to correctly process the paths.

package/src/builders/browser-esbuild/stylesheets.d.ts

@@ -19,36 +19,24 @@ export interface BundleStylesheetOptions {
     externalDependencies?: string[];
     target: string[];
 }
-export declare function createStylesheetBundleOptions(options: BundleStylesheetOptions): BuildOptions & {
+export declare function createStylesheetBundleOptions(options: BundleStylesheetOptions, inlineComponentData?: Record<string, string>): BuildOptions & {
     plugins: NonNullable<BuildOptions['plugins']>;
 };
 /**
- * Bundle a stylesheet that exists as a file on the filesystem.
+ * Bundles a component stylesheet. The stylesheet can be either an inline stylesheet that
+ * is contained within the Component's metadata definition or an external file referenced
+ * from the Component's metadata definition.
  *
- * @param filename The path to the file to bundle.
- * @param options The stylesheet bundling options to use.
- * @returns The bundle result object.
+ * @param identifier A unique string identifier for the component stylesheet.
+ * @param language The language of the stylesheet such as `css` or `scss`.
+ * @param data The string content of the stylesheet.
+ * @param filename The filename representing the source of the stylesheet content.
+ * @param inline If true, the stylesheet source is within the component metadata;
+ * if false, the source is a stylesheet file.
+ * @param options An object containing the stylesheet bundling options.
+ * @returns An object containing the output of the bundling operation.
  */
-export declare function bundleStylesheetFile(filename: string, options: BundleStylesheetOptions): Promise<{
-    errors: import("esbuild").Message[];
-    warnings: import("esbuild").Message[];
-    contents: string;
-    map: string | undefined;
-    path: string | undefined;
-    resourceFiles: OutputFile[];
-}>;
-/**
- * Bundle stylesheet text data from a string.
- *
- * @param data The string content of a stylesheet to bundle.
- * @param dataOptions The options to use to resolve references and name output of the stylesheet data.
- * @param bundleOptions  The stylesheet bundling options to use.
- * @returns The bundle result object.
- */
-export declare function bundleStylesheetText(data: string, dataOptions: {
-    resolvePath: string;
-    virtualName?: string;
-}, bundleOptions: BundleStylesheetOptions): Promise<{
+export declare function bundleComponentStylesheet(identifier: string, language: string, data: string, filename: string, inline: boolean, options: BundleStylesheetOptions): Promise<{
     errors: import("esbuild").Message[];
     warnings: import("esbuild").Message[];
     contents: string;

package/src/builders/browser-esbuild/stylesheets.js

@@ -30,12 +30,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bundleStylesheetText = exports.bundleStylesheetFile = exports.createStylesheetBundleOptions = void 0;
-const path = __importStar(require("path"));
+exports.bundleComponentStylesheet = exports.createStylesheetBundleOptions = void 0;
+const path = __importStar(require("node:path"));
 const css_resource_plugin_1 = require("./css-resource-plugin");
 const esbuild_1 = require("./esbuild");
 const sass_plugin_1 = require("./sass-plugin");
-function createStylesheetBundleOptions(options) {
+function createStylesheetBundleOptions(options, inlineComponentData) {
     var _a, _b;
     return {
         absWorkingDir: options.workspaceRoot,
@@ -54,18 +54,65 @@ function createStylesheetBundleOptions(options) {
         conditions: ['style', 'sass'],
         mainFields: ['style', 'sass'],
         plugins: [
-            (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, loadPaths: options.includePaths }),
+            (0, sass_plugin_1.createSassPlugin)({
+                sourcemap: !!options.sourcemap,
+                loadPaths: options.includePaths,
+                inlineComponentData,
+            }),
             (0, css_resource_plugin_1.createCssResourcePlugin)(),
         ],
     };
 }
 exports.createStylesheetBundleOptions = createStylesheetBundleOptions;
-async function bundleStylesheet(entry, options) {
-    // Execute esbuild
-    const result = await (0, esbuild_1.bundle)(options.workspaceRoot, {
-        ...createStylesheetBundleOptions(options),
-        ...entry,
+/**
+ * Bundles a component stylesheet. The stylesheet can be either an inline stylesheet that
+ * is contained within the Component's metadata definition or an external file referenced
+ * from the Component's metadata definition.
+ *
+ * @param identifier A unique string identifier for the component stylesheet.
+ * @param language The language of the stylesheet such as `css` or `scss`.
+ * @param data The string content of the stylesheet.
+ * @param filename The filename representing the source of the stylesheet content.
+ * @param inline If true, the stylesheet source is within the component metadata;
+ * if false, the source is a stylesheet file.
+ * @param options An object containing the stylesheet bundling options.
+ * @returns An object containing the output of the bundling operation.
+ */
+async function bundleComponentStylesheet(identifier, language, data, filename, inline, options) {
+    const namespace = 'angular:styles/component';
+    const entry = [namespace, language, identifier, filename].join(';');
+    const buildOptions = createStylesheetBundleOptions(options, { [entry]: data });
+    buildOptions.entryPoints = [entry];
+    buildOptions.plugins.push({
+        name: 'angular-component-styles',
+        setup(build) {
+            build.onResolve({ filter: /^angular:styles\/component;/ }, (args) => {
+                if (args.kind !== 'entry-point') {
+                    return null;
+                }
+                if (inline) {
+                    return {
+                        path: args.path,
+                        namespace,
+                    };
+                }
+                else {
+                    return {
+                        path: filename,
+                    };
+                }
+            });
+            build.onLoad({ filter: /^angular:styles\/component;css;/, namespace }, async () => {
+                return {
+                    contents: data,
+                    loader: 'css',
+                    resolveDir: path.dirname(filename),
+                };
+            });
+        },
     });
+    // Execute esbuild
+    const result = await (0, esbuild_1.bundle)(options.workspaceRoot, buildOptions);
     // Extract the result of the bundling from the output files
     let contents = '';
     let map;
@@ -96,34 +143,4 @@ async function bundleStylesheet(entry, options) {
         resourceFiles,
     };
 }
-/**
- * Bundle a stylesheet that exists as a file on the filesystem.
- *
- * @param filename The path to the file to bundle.
- * @param options The stylesheet bundling options to use.
- * @returns The bundle result object.
- */
-async function bundleStylesheetFile(filename, options) {
-    return bundleStylesheet({ entryPoints: [filename] }, options);
-}
-exports.bundleStylesheetFile = bundleStylesheetFile;
-/**
- * Bundle stylesheet text data from a string.
- *
- * @param data The string content of a stylesheet to bundle.
- * @param dataOptions The options to use to resolve references and name output of the stylesheet data.
- * @param bundleOptions  The stylesheet bundling options to use.
- * @returns The bundle result object.
- */
-async function bundleStylesheetText(data, dataOptions, bundleOptions) {
-    const result = bundleStylesheet({
-        stdin: {
-            contents: data,
-            sourcefile: dataOptions.virtualName,
-            resolveDir: dataOptions.resolvePath,
-            loader: 'css',
-        },
-    }, bundleOptions);
-    return result;
-}
-exports.bundleStylesheetText = bundleStylesheetText;
+exports.bundleComponentStylesheet = bundleComponentStylesheet;

package/src/builders/browser-esbuild/worker-angular-compilation.js

@@ -0,0 +1,59 @@
+"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
+//  */
+// import type ng from '@angular/compiler-cli';
+// import { Worker } from 'node:worker_threads';
+// import { AngularHostOptions } from './angular-host';
+// interface Message {
+//   id: number;
+// }
+// interface InitializeRequest extends Message {
+//   tsconfig: string;
+//   tsCallbackId: number;
+//   tcoCallbackId?: number;
+// }
+// // eslint-disable-next-line @typescript-eslint/no-explicit-any
+// type ResponseCallback = (...args: any[]) => void;
+// let callbackIds = 0;
+// export class WorkerAngularCompilation {
+//   #worker: Worker;
+//   #callbacks = new Map<number, ResponseCallback>();
+//   constructor() {
+//     this.#worker = new Worker(require.resolve('./compilation-worker'));
+//   }
+//   async initialize(
+//     tsconfig: string,
+//     hostOptions: AngularHostOptions,
+//     transformCompilerOptions?: (compilerOptions: ng.CompilerOptions) => ng.CompilerOptions,
+//   ): Promise<{ compilerOptions: ng.CompilerOptions }> {
+//     const request: InitializeRequest = {
+//       id: ++callbackIds,
+//       tsconfig,
+//       tsCallbackId: ++callbackIds,
+//     };
+//     this.#callbacks.set(request.tsCallbackId, () => {
+//       hostOptions.transformStylesheet();
+//     });
+//     if (transformCompilerOptions) {
+//       request.tcoCallbackId = ++callbackIds;
+//       this.#callbacks.set(request.tcoCallbackId, (id: number, compilerOptions) => {
+//         try {
+//             transformCompilerOptions(compilerOptions);
+//         } catch (e) {
+//         }
+//       });
+//     }
+//     const result = new Promise<{ compilerOptions: ng.CompilerOptions }>((resolve, reject) => {
+//         this.#callbacks.set(request.id, () => {
+//             resolve({});
+//         });
+//     });
+//     this.#worker.postMessage(request);
+//     return result;
+//   }
+// }

package/src/builders/karma/index.js

@@ -149,7 +149,9 @@ function execute(options, context, transforms = {}) {
         });
         const karmaStart = karmaServer.start();
         // Cleanup, signal Karma to exit.
-        return () => karmaStart.then(() => karmaServer.stop());
+        return () => {
+            void karmaStart.then(() => karmaServer.stop());
+        };
     })), (0, operators_1.defaultIfEmpty)({ success: false }));
 }
 exports.execute = execute;

package/src/utils/i18n-inlining.js

@@ -52,7 +52,7 @@ function emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emitte
             code: fs.readFileSync(originalPath, 'utf8'),
             outputPath,
             missingTranslation,
-            setLocale: emittedFile.name === 'main' || emittedFile.name === 'vendor',
+            setLocale: emittedFile.name === 'main',
         };
         originalFiles.push(originalPath);
         try {

package/src/utils/process-bundle.js

@@ -211,7 +211,7 @@ async function inlineLocalesDirect(ast, options) {
         }
         let outputSource = content;
         if (options.setLocale) {
-            const setLocaleText = `var $localize=Object.assign(void 0===$localize?{}:$localize,{locale:"${locale}"});\n`;
+            const setLocaleText = `globalThis.$localize=Object.assign(globalThis.$localize || {},{locale:"${locale}"});\n`;
             // If locale data is provided, load it and prepend to file
             let localeDataSource;
             const localeDataPath = i18n.locales[locale] && i18n.locales[locale].dataPath;

package/src/webpack/configs/styles.js

@@ -320,6 +320,7 @@ function getSassLoaderOptions(root, implementation, includePaths, indentedSyntax
                 quietDeps: !verbose,
                 verbose,
                 syntax: indentedSyntax ? 'indented' : 'scss',
+                sourceMapIncludeSources: true,
             }),
         }
         : {

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

@@ -24,8 +24,6 @@ class StylesWebpackPlugin {
     }
     apply(compiler) {
         const { entryPoints, preserveSymlinks, root } = this.options;
-        const webpackOptions = compiler.options;
-        const entry = typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
         const resolver = compiler.resolverFactory.get('global-styles', {
             conditionNames: ['sass', 'less', 'style'],
             mainFields: ['sass', 'less', 'style', 'main', '...'],
@@ -36,33 +34,37 @@ class StylesWebpackPlugin {
             symlinks: !preserveSymlinks,
             fileSystem: compiler.inputFileSystem,
         });
-        webpackOptions.entry = async () => {
-            var _a, _b;
-            var _c;
-            const entrypoints = await entry;
-            for (const [bundleName, paths] of Object.entries(entryPoints)) {
-                (_a = entrypoints[bundleName]) !== null && _a !== void 0 ? _a : (entrypoints[bundleName] = {});
-                const entryImport = ((_b = (_c = entrypoints[bundleName]).import) !== null && _b !== void 0 ? _b : (_c.import = []));
-                for (const path of paths) {
-                    try {
-                        const resolvedPath = resolver.resolveSync({}, root, path);
-                        if (resolvedPath) {
-                            entryImport.push(`${resolvedPath}?ngGlobalStyle`);
+        const webpackOptions = compiler.options;
+        compiler.hooks.environment.tap(PLUGIN_NAME, () => {
+            const entry = typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
+            webpackOptions.entry = async () => {
+                var _a, _b;
+                var _c;
+                const entrypoints = await entry;
+                for (const [bundleName, paths] of Object.entries(entryPoints)) {
+                    (_a = entrypoints[bundleName]) !== null && _a !== void 0 ? _a : (entrypoints[bundleName] = {});
+                    const entryImport = ((_b = (_c = entrypoints[bundleName]).import) !== null && _b !== void 0 ? _b : (_c.import = []));
+                    for (const path of paths) {
+                        try {
+                            const resolvedPath = resolver.resolveSync({}, root, path);
+                            if (resolvedPath) {
+                                entryImport.push(`${resolvedPath}?ngGlobalStyle`);
+                            }
+                            else {
+                                (0, assert_1.default)(this.compilation, 'Compilation cannot be undefined.');
+                                (0, webpack_diagnostics_1.addError)(this.compilation, `Cannot resolve '${path}'.`);
+                            }
                         }
-                        else {
+                        catch (error) {
                             (0, assert_1.default)(this.compilation, 'Compilation cannot be undefined.');
-                            (0, webpack_diagnostics_1.addError)(this.compilation, `Cannot resolve '${path}'.`);
+                            (0, error_1.assertIsError)(error);
+                            (0, webpack_diagnostics_1.addError)(this.compilation, error.message);
                         }
                     }
-                    catch (error) {
-                        (0, assert_1.default)(this.compilation, 'Compilation cannot be undefined.');
-                        (0, error_1.assertIsError)(error);
-                        (0, webpack_diagnostics_1.addError)(this.compilation, error.message);
-                    }
                 }
-            }
-            return entrypoints;
-        };
+                return entrypoints;
+            };
+        });
         compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
             this.compilation = compilation;
         });