@angular-devkit/build-angular 15.0.0-next.2 → 15.0.0-next.4

package/src/utils/normalize-polyfills.js

@@ -0,0 +1,24 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizePolyfills = void 0;
+const fs_1 = require("fs");
+const path_1 = require("path");
+function normalizePolyfills(polyfills, root) {
+    if (!polyfills) {
+        return [];
+    }
+    const polyfillsList = Array.isArray(polyfills) ? polyfills : [polyfills];
+    return polyfillsList.map((p) => {
+        const resolvedPath = (0, path_1.resolve)(root, p);
+        // If file doesn't exist, let the bundle resolve it using node module resolution.
+        return (0, fs_1.existsSync)(resolvedPath) ? resolvedPath : p;
+    });
+}
+exports.normalizePolyfills = normalizePolyfills;

package/src/utils/process-bundle.js

@@ -115,7 +115,7 @@ async function inlineLocales(options) {
         ast = (0, core_1.parseSync)(options.code, {
             babelrc: false,
             configFile: false,
-            sourceType: 'script',
+            sourceType: 'unambiguous',
             filename: options.filename,
         });
     }

package/src/utils/service-worker.d.ts

@@ -6,5 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 /// <reference types="node" />
+import type { Config } from '@angular/service-worker/config';
 import { promises as fsPromises } from 'fs';
 export declare function augmentAppWithServiceWorker(appRoot: string, workspaceRoot: string, outputPath: string, baseHref: string, ngswConfigPath?: string, inputputFileSystem?: typeof fsPromises, outputFileSystem?: typeof fsPromises): Promise<void>;
+export declare function augmentAppWithServiceWorkerEsbuild(workspaceRoot: string, configPath: string, outputPath: string, baseHref: string): Promise<void>;
+export declare function augmentAppWithServiceWorkerCore(config: Config, outputPath: string, baseHref: string, inputputFileSystem?: typeof fsPromises, outputFileSystem?: typeof fsPromises): Promise<void>;

package/src/utils/service-worker.js

@@ -30,7 +30,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.augmentAppWithServiceWorker = void 0;
+exports.augmentAppWithServiceWorkerCore = exports.augmentAppWithServiceWorkerEsbuild = exports.augmentAppWithServiceWorker = void 0;
 const crypto = __importStar(require("crypto"));
 const fs_1 = require("fs");
 const path = __importStar(require("path"));
@@ -100,6 +100,33 @@ async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, b
             throw error;
         }
     }
+    return augmentAppWithServiceWorkerCore(config, outputPath, baseHref, inputputFileSystem, outputFileSystem);
+}
+exports.augmentAppWithServiceWorker = augmentAppWithServiceWorker;
+// This is currently used by the esbuild-based builder
+async function augmentAppWithServiceWorkerEsbuild(workspaceRoot, configPath, outputPath, baseHref) {
+    // Read the configuration file
+    let config;
+    try {
+        const configurationData = await fs_1.promises.readFile(configPath, 'utf-8');
+        config = JSON.parse(configurationData);
+    }
+    catch (error) {
+        (0, error_1.assertIsError)(error);
+        if (error.code === 'ENOENT') {
+            // TODO: Generate an error object that can be consumed by the esbuild-based builder
+            const message = `Service worker configuration file "${path.relative(workspaceRoot, configPath)}" could not be found.`;
+            throw new Error(message);
+        }
+        else {
+            throw error;
+        }
+    }
+    // TODO: Return the output files and any errors/warnings
+    return augmentAppWithServiceWorkerCore(config, outputPath, baseHref);
+}
+exports.augmentAppWithServiceWorkerEsbuild = augmentAppWithServiceWorkerEsbuild;
+async function augmentAppWithServiceWorkerCore(config, outputPath, baseHref, inputputFileSystem = fs_1.promises, outputFileSystem = fs_1.promises) {
     // Load ESM `@angular/service-worker/config` 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.
@@ -135,4 +162,4 @@ async function augmentAppWithServiceWorker(appRoot, workspaceRoot, outputPath, b
         }
     }
 }
-exports.augmentAppWithServiceWorker = augmentAppWithServiceWorker;
+exports.augmentAppWithServiceWorkerCore = augmentAppWithServiceWorkerCore;

package/src/utils/webpack-diagnostics.d.ts

@@ -5,6 +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 { Compilation } from 'webpack';
+import type { Compilation } from 'webpack';
 export declare function addWarning(compilation: Compilation, message: string): void;
 export declare function addError(compilation: Compilation, message: string): void;

package/src/utils/webpack-diagnostics.js

@@ -8,12 +8,11 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addError = exports.addWarning = void 0;
-const webpack_1 = require("webpack");
 function addWarning(compilation, message) {
-    compilation.warnings.push(new webpack_1.WebpackError(message));
+    compilation.warnings.push(new compilation.compiler.webpack.WebpackError(message));
 }
 exports.addWarning = addWarning;
 function addError(compilation, message) {
-    compilation.errors.push(new webpack_1.WebpackError(message));
+    compilation.errors.push(new compilation.compiler.webpack.WebpackError(message));
 }
 exports.addError = addError;

package/src/webpack/configs/common.js

@@ -54,7 +54,7 @@ const VENDORS_TEST = /[\\/]node_modules[\\/]/;
 async function getCommonConfig(wco) {
     var _a, _b;
     const { root, projectRoot, buildOptions, tsConfig, projectName, sourceRoot, tsConfigPath } = wco;
-    const { cache, codeCoverage, crossOrigin = 'none', platform = 'browser', aot = true, codeCoverageExclude = [], main, polyfills, sourceMap: { styles: stylesSourceMap, scripts: scriptsSourceMap, vendor: vendorSourceMap, hidden: hiddenSourceMap, }, optimization: { styles: stylesOptimization, scripts: scriptsOptimization }, commonChunk, vendorChunk, subresourceIntegrity, verbose, poll, webWorkerTsConfig, externalDependencies = [], allowedCommonJsDependencies, bundleDependencies, } = buildOptions;
+    const { cache, codeCoverage, crossOrigin = 'none', platform = 'browser', aot = true, codeCoverageExclude = [], main, polyfills, sourceMap: { styles: stylesSourceMap, scripts: scriptsSourceMap, vendor: vendorSourceMap, hidden: hiddenSourceMap, }, optimization: { styles: stylesOptimization, scripts: scriptsOptimization }, commonChunk, vendorChunk, subresourceIntegrity, verbose, poll, webWorkerTsConfig, externalDependencies = [], allowedCommonJsDependencies, } = buildOptions;
     const isPlatformServer = buildOptions.platform === 'server';
     const extraPlugins = [];
     const extraRules = [];
@@ -76,14 +76,32 @@ async function getCommonConfig(wco) {
         // Fixes Critical dependency: the request of a dependency is an expression
         extraPlugins.push(new webpack_2.ContextReplacementPlugin(/@?hapi|express[\\/]/));
     }
-    if (!isPlatformServer) {
-        if (buildOptions.polyfills) {
-            const projectPolyfills = path.resolve(root, buildOptions.polyfills);
-            if (entryPoints['polyfills']) {
-                entryPoints['polyfills'].push(projectPolyfills);
+    if (polyfills === null || polyfills === void 0 ? void 0 : polyfills.length) {
+        // `zone.js/testing` is a **special** polyfill because when not imported in the main it fails with the below errors:
+        // `Error: Expected to be running in 'ProxyZone', but it was not found.`
+        // This was also the reason why previously it was imported in `test.ts` as the first module.
+        // From Jia li:
+        // This is because the jasmine functions such as beforeEach/it will not be patched by zone.js since
+        // jasmine will not be loaded yet, so the ProxyZone will not be there. We have to load zone-testing.js after
+        // jasmine is ready.
+        // We could force loading 'zone.js/testing' prior to jasmine by changing the order of scripts in 'karma-context.html'.
+        // But this has it's own problems as zone.js needs to be loaded prior to jasmine due to patching of timing functions
+        // See: https://github.com/jasmine/jasmine/issues/1944
+        // Thus the correct order is zone.js -> jasmine -> zone.js/testing.
+        const zoneTestingEntryPoint = 'zone.js/testing';
+        const polyfillsExludingZoneTesting = polyfills.filter((p) => p !== zoneTestingEntryPoint);
+        if (Array.isArray(entryPoints['polyfills'])) {
+            entryPoints['polyfills'].push(...polyfillsExludingZoneTesting);
+        }
+        else {
+            entryPoints['polyfills'] = polyfillsExludingZoneTesting;
+        }
+        if (polyfillsExludingZoneTesting.length !== polyfills.length) {
+            if (Array.isArray(entryPoints['main'])) {
+                entryPoints['main'].unshift(zoneTestingEntryPoint);
             }
             else {
-                entryPoints['polyfills'] = [projectPolyfills];
+                entryPoints['main'] = [zoneTestingEntryPoint];
             }
         }
     }
@@ -96,7 +114,7 @@ async function getCommonConfig(wco) {
     }
     // process global scripts
     // Add a new asset for each entry.
-    for (const { bundleName, inject, paths } of (0, helpers_1.globalScriptsByBundleName)(root, buildOptions.scripts)) {
+    for (const { bundleName, inject, paths } of (0, helpers_1.globalScriptsByBundleName)(buildOptions.scripts)) {
         // Lazy scripts don't get a hash, otherwise they can't be loaded by name.
         const hash = inject ? hashFormat.script : '';
         extraPlugins.push(new plugins_1.ScriptsWebpackPlugin({
@@ -104,7 +122,7 @@ async function getCommonConfig(wco) {
             sourceMap: scriptsSourceMap,
             scripts: paths,
             filename: `${path.basename(bundleName)}${hash}.js`,
-            basePath: projectRoot,
+            basePath: root,
         }));
     }
     // process asset entries
@@ -204,10 +222,6 @@ async function getCommonConfig(wco) {
     if (platform === 'browser' && (scriptsOptimization || stylesOptimization.minify)) {
         extraMinimizers.push(new transfer_size_plugin_1.TransferSizePlugin());
     }
-    const externals = [...externalDependencies];
-    if (isPlatformServer && !bundleDependencies) {
-        externals.push(({ context, request }, callback) => (0, helpers_1.externalizePackages)(context !== null && context !== void 0 ? context : wco.projectRoot, request, callback));
-    }
     let crossOriginLoading = false;
     if (subresourceIntegrity && crossOrigin === 'none') {
         crossOriginLoading = 'anonymous';
@@ -235,7 +249,7 @@ async function getCommonConfig(wco) {
         },
         context: root,
         entry: entryPoints,
-        externals,
+        externals: externalDependencies,
         output: {
             uniqueName: projectName,
             hashFunction: 'xxhash64',
@@ -280,6 +294,7 @@ async function getCommonConfig(wco) {
             strictExportPresence: true,
             parser: {
                 javascript: {
+                    requireContext: false,
                     // Disable auto URL asset module creation. This doesn't effect `new Worker(new URL(...))`
                     // https://webpack.js.org/guides/asset-modules/#url-assets
                     url: false,

package/src/webpack/configs/styles.d.ts

@@ -5,12 +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 { Configuration } from 'webpack';
-import { StyleElement } from '../../builders/browser/schema';
+import type { Configuration } from 'webpack';
 import { WebpackConfigOptions } from '../../utils/build-options';
-export declare function resolveGlobalStyles(styleEntrypoints: StyleElement[], root: string, preserveSymlinks: boolean, skipResolution?: boolean): {
-    entryPoints: Record<string, string[]>;
-    noInjectNames: string[];
-    paths: string[];
-};
 export declare function getStylesConfig(wco: WebpackConfigOptions): Configuration;

package/src/webpack/configs/styles.js

@@ -33,57 +33,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStylesConfig = exports.resolveGlobalStyles = void 0;
+exports.getStylesConfig = 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 url_1 = require("url");
 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 styles_webpack_plugin_1 = require("../plugins/styles-webpack-plugin");
 const helpers_1 = require("../utils/helpers");
-function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks, skipResolution = false) {
-    const entryPoints = {};
-    const noInjectNames = [];
-    const paths = [];
-    if (styleEntrypoints.length === 0) {
-        return { entryPoints, noInjectNames, paths };
-    }
-    for (const style of (0, helpers_1.normalizeExtraEntryPoints)(styleEntrypoints, 'styles')) {
-        let stylesheetPath = style.input;
-        if (!skipResolution) {
-            stylesheetPath = path.resolve(root, stylesheetPath);
-            if (!fs.existsSync(stylesheetPath)) {
-                try {
-                    stylesheetPath = require.resolve(style.input, { paths: [root] });
-                }
-                catch { }
-            }
-        }
-        if (!preserveSymlinks) {
-            stylesheetPath = fs.realpathSync(stylesheetPath);
-        }
-        // Add style entry points.
-        if (entryPoints[style.bundleName]) {
-            entryPoints[style.bundleName].push(stylesheetPath);
-        }
-        else {
-            entryPoints[style.bundleName] = [stylesheetPath];
-        }
-        // Add non injected styles to the list.
-        if (!style.inject) {
-            noInjectNames.push(style.bundleName);
-        }
-        // Add global css paths.
-        paths.push(stylesheetPath);
-    }
-    return { entryPoints, noInjectNames, paths };
-}
-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;
@@ -92,24 +57,26 @@ function getStylesConfig(wco) {
     // use includePaths from appConfig
     const includePaths = (_c = (_b = (_a = buildOptions.stylePreprocessorOptions) === null || _a === void 0 ? void 0 : _a.includePaths) === null || _b === void 0 ? void 0 : _b.map((p) => path.resolve(root, p))) !== null && _c !== void 0 ? _c : [];
     // Process global styles.
-    const { entryPoints, noInjectNames, paths: globalStylePaths, } = resolveGlobalStyles(buildOptions.styles, root, !!buildOptions.preserveSymlinks);
-    if (noInjectNames.length > 0) {
-        // Add plugin to remove hashes from lazy styles.
-        extraPlugins.push(new plugins_1.RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
+    if (buildOptions.styles.length > 0) {
+        const { entryPoints, noInjectNames } = (0, helpers_1.normalizeGlobalStyles)(buildOptions.styles);
+        extraPlugins.push(new styles_webpack_plugin_1.StylesWebpackPlugin({
+            root,
+            entryPoints,
+            preserveSymlinks: buildOptions.preserveSymlinks,
+        }));
+        if (noInjectNames.length > 0) {
+            // Add plugin to remove hashes from lazy styles.
+            extraPlugins.push(new plugins_1.RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
+        }
     }
-    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);
@@ -147,7 +114,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) => {
@@ -243,30 +209,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, sassImplementation, includePaths, false, !buildOptions.verbose, !!buildOptions.preserveSymlinks),
                 },
             ],
         },
@@ -281,31 +224,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, sassImplementation, includePaths, true, !buildOptions.verbose, !!buildOptions.preserveSymlinks),
                 },
             ],
         },
@@ -327,7 +246,6 @@ function getStylesConfig(wco) {
         },
     ];
     return {
-        entry: entryPoints,
         module: {
             rules: styleLanguages.map(({ extensions, use }) => ({
                 test: new RegExp(`\\.(?:${extensions.join('|')})$`, 'i'),
@@ -338,8 +256,7 @@ function getStylesConfig(wco) {
                             // Global styles are only defined global styles
                             {
                                 use: globalStyleLoaders,
-                                include: globalStylePaths,
-                                resourceQuery: { not: [/\?ngResource/] },
+                                resourceQuery: /\?ngGlobalStyle/,
                             },
                             // Component styles are all styles except defined global styles
                             {
@@ -382,3 +299,82 @@ function getTailwindConfigPath({ projectRoot, root }) {
     }
     return undefined;
 }
+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',
+            }),
+        }
+        : {
+            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,
+            },
+        };
+}
+function getSassResolutionImporter(loaderContext, root, preserveSymlinks) {
+    const commonResolverOptions = {
+        conditionNames: ['sass', 'style'],
+        mainFields: ['sass', 'style', 'main', '...'],
+        extensions: ['.scss', '.sass', '.css'],
+        restrictions: [/\.((sa|sc|c)ss)$/i],
+        preferRelative: true,
+        symlinks: !preserveSymlinks,
+    };
+    // Sass also supports import-only files. If you name a file <name>.import.scss, it will only be loaded for imports, not for @uses.
+    // See: https://sass-lang.com/documentation/at-rules/import#import-only-files
+    const resolveImport = loaderContext.getResolve({
+        ...commonResolverOptions,
+        dependencyType: 'sass-import',
+        mainFiles: ['_index.import', '_index', 'index.import', 'index', '...'],
+    });
+    const resolveModule = loaderContext.getResolve({
+        ...commonResolverOptions,
+        dependencyType: 'sass-module',
+        mainFiles: ['_index', 'index', '...'],
+    });
+    return {
+        findFileUrl: (url, { fromImport }) => {
+            const resolve = fromImport ? resolveImport : resolveModule;
+            return resolve(root, url)
+                .then((file) => (0, url_1.pathToFileURL)(file))
+                .catch(() => null);
+        },
+    };
+}

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

@@ -14,6 +14,7 @@ exports.JavaScriptOptimizerPlugin = void 0;
 const piscina_1 = __importDefault(require("piscina"));
 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.
@@ -142,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/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/scripts-webpack-plugin.js

@@ -34,6 +34,8 @@ exports.ScriptsWebpackPlugin = void 0;
 const loader_utils_1 = require("loader-utils");
 const path = __importStar(require("path"));
 const webpack_1 = require("webpack");
+const error_1 = require("../../utils/error");
+const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const Entrypoint = require('webpack/lib/Entrypoint');
 /**
  * The name of the plugin provided to Webpack when tapping Webpack compiler hooks.
@@ -81,18 +83,35 @@ class ScriptsWebpackPlugin {
         chunk.addGroup(entrypoint);
         compilation.entrypoints.set(this.options.name, entrypoint);
         compilation.chunks.add(chunk);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         compilation.assets[filename] = source;
         compilation.hooks.chunkAsset.call(chunk, filename);
     }
     apply(compiler) {
-        if (!this.options.scripts || this.options.scripts.length === 0) {
+        if (this.options.scripts.length === 0) {
             return;
         }
-        const scripts = this.options.scripts
-            .filter((script) => !!script)
-            .map((script) => path.resolve(this.options.basePath || '', script));
+        const resolver = compiler.resolverFactory.get('normal', {
+            preferRelative: true,
+            useSyncFileSystemCalls: true,
+            fileSystem: compiler.inputFileSystem,
+        });
         compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            const scripts = [];
+            for (const script of this.options.scripts) {
+                try {
+                    const resolvedPath = resolver.resolveSync({}, this.options.basePath, script);
+                    if (resolvedPath) {
+                        scripts.push(resolvedPath);
+                    }
+                    else {
+                        (0, webpack_diagnostics_1.addError)(compilation, `Cannot resolve '${script}'.`);
+                    }
+                }
+                catch (error) {
+                    (0, error_1.assertIsError)(error);
+                    (0, webpack_diagnostics_1.addError)(compilation, error.message);
+                }
+            }
             compilation.hooks.additionalAssets.tapPromise(PLUGIN_NAME, async () => {
                 if (await this.shouldSkip(compilation, scripts)) {
                     if (this._cachedOutput) {

package/src/webpack/plugins/styles-webpack-plugin.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @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 { Compiler } from 'webpack';
+export interface StylesWebpackPluginOptions {
+    preserveSymlinks?: boolean;
+    root: string;
+    entryPoints: Record<string, string[]>;
+}
+export declare class StylesWebpackPlugin {
+    private readonly options;
+    private compilation;
+    constructor(options: StylesWebpackPluginOptions);
+    apply(compiler: Compiler): void;
+}