@angular-devkit/build-angular 14.1.0-next.4 → 14.1.1

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "14.1.0-next.4",
+  "version": "14.1.1",
   "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.1401.0-next.4",
-    "@angular-devkit/build-webpack": "0.1401.0-next.4",
-    "@angular-devkit/core": "14.1.0-next.4",
+    "@angular-devkit/architect": "0.1401.1",
+    "@angular-devkit/build-webpack": "0.1401.1",
+    "@angular-devkit/core": "14.1.1",
     "@babel/core": "7.18.6",
     "@babel/generator": "7.18.7",
     "@babel/helper-annotate-as-pure": "7.18.6",
@@ -20,7 +20,7 @@
     "@babel/runtime": "7.18.6",
     "@babel/template": "7.18.6",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "14.1.0-next.4",
+    "@ngtools/webpack": "14.1.1",
     "ansi-colors": "4.1.3",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
@@ -29,11 +29,11 @@
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
     "css-loader": "6.7.1",
-    "esbuild-wasm": "0.14.48",
+    "esbuild-wasm": "0.14.49",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
-    "jsonc-parser": "3.0.0",
+    "jsonc-parser": "3.1.0",
     "karma-source-map-support": "1.4.0",
     "less": "4.1.3",
     "less-loader": "11.0.0",
@@ -47,7 +47,7 @@
     "piscina": "3.2.0",
     "postcss": "8.4.14",
     "postcss-import": "14.1.0",
-    "postcss-loader": "7.0.0",
+    "postcss-loader": "7.0.1",
     "postcss-preset-env": "7.7.2",
     "regenerator-runtime": "0.13.9",
     "resolve-url-loader": "5.0.0",
@@ -59,7 +59,7 @@
     "source-map-support": "0.5.21",
     "stylus": "0.58.1",
     "stylus-loader": "7.0.0",
-    "terser": "5.14.1",
+    "terser": "5.14.2",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.4.0",
@@ -70,14 +70,14 @@
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.14.48"
+    "esbuild": "0.14.49"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",
-    "@angular/localize": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",
-    "@angular/service-worker": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",
+    "@angular/compiler-cli": "^14.0.0",
+    "@angular/localize": "^14.0.0",
+    "@angular/service-worker": "^14.0.0",
     "karma": "^6.3.0",
-    "ng-packagr": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",
+    "ng-packagr": "^14.0.0",
     "protractor": "^7.0.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",
     "typescript": ">=4.6.2 <4.8"

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

@@ -11,4 +11,5 @@ export declare function createCompilerPlugin(pluginOptions: {
     sourcemap: boolean;
     tsconfig: string;
     advancedOptimizations?: boolean;
+    thirdPartySourcemaps?: boolean;
 }, styleOptions: BundleStylesheetOptions): Plugin;

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

@@ -167,18 +167,25 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 const result = {};
                 // Create TypeScript compiler host
                 const host = typescript_1.default.createIncrementalCompilerHost(compilerOptions);
-                // Temporarily add a readResource hook to allow for a transformResource hook.
-                // Once the AOT compiler allows only a transformResource hook this can be removed.
-                host.readResource = function (fileName) {
-                    var _a;
-                    // Provide same no file found behavior as @ngtools/webpack
-                    return (_a = this.readFile(fileName)) !== null && _a !== void 0 ? _a : '';
+                // Temporarily process external resources via readResource.
+                // The AOT compiler currently requires this hook to allow for a transformResource hook.
+                // Once the AOT compiler allows only a transformResource hook, this can be reevaluated.
+                host.readResource = async function (fileName) {
+                    var _a, _b, _c;
+                    // Template resources (.html) files are not bundled or transformed
+                    if (fileName.endsWith('.html')) {
+                        return (_a = this.readFile(fileName)) !== null && _a !== void 0 ? _a : '';
+                    }
+                    const { contents, errors, warnings } = await (0, stylesheets_1.bundleStylesheetFile)(fileName, styleOptions);
+                    ((_b = result.errors) !== null && _b !== void 0 ? _b : (result.errors = [])).push(...errors);
+                    ((_c = result.warnings) !== null && _c !== void 0 ? _c : (result.warnings = [])).push(...warnings);
+                    return contents;
                 };
                 // Add an AOT compiler resource transform hook
                 host.transformResource = async function (data, context) {
                     var _a, _b, _c;
-                    // Only style resources are transformed currently
-                    if (context.type !== 'style') {
+                    // Only inline style resources are transformed separately currently
+                    if (context.resourceFile || context.type !== 'style') {
                         return null;
                     }
                     // The file with the resource content will either be an actual file (resourceFile)
@@ -256,10 +263,12 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         ],
                     };
                 }
+                const useInputSourcemap = pluginOptions.sourcemap &&
+                    (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
                 const data = (_a = typescriptResult.content) !== null && _a !== void 0 ? _a : '';
                 const babelResult = await (0, core_1.transformAsync)(data, {
                     filename: args.path,
-                    inputSourceMap: (pluginOptions.sourcemap ? undefined : false),
+                    inputSourceMap: (useInputSourcemap ? undefined : false),
                     sourceMaps: pluginOptions.sourcemap ? 'inline' : false,
                     compact: false,
                     configFile: false,
@@ -285,10 +294,12 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 var _a;
                 const angularPackage = /[\\/]node_modules[\\/]@angular[\\/]/.test(args.path);
                 const linkerPluginCreator = (await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/linker/babel')).createEs2015LinkerPlugin;
+                const useInputSourcemap = pluginOptions.sourcemap &&
+                    (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
                 const data = await fs_1.promises.readFile(args.path, 'utf-8');
                 const result = await (0, core_1.transformAsync)(data, {
                     filename: args.path,
-                    inputSourceMap: (pluginOptions.sourcemap ? undefined : false),
+                    inputSourceMap: (useInputSourcemap ? undefined : false),
                     sourceMaps: pluginOptions.sourcemap ? 'inline' : false,
                     compact: false,
                     configFile: false,

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

@@ -7,8 +7,6 @@
  */
 import { BuilderContext } from '@angular-devkit/architect';
 import { BuildFailure, BuildOptions, BuildResult, Message, OutputFile } from 'esbuild';
-/** Default outdir setting for esbuild. */
-export declare const DEFAULT_OUTDIR: string;
 /**
  * Determines if an unknown value is an esbuild BuildFailure error object thrown by esbuild.
  * @param value A potential esbuild BuildFailure error object.

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

@@ -7,11 +7,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.logMessages = exports.bundle = exports.isEsBuildFailure = exports.DEFAULT_OUTDIR = void 0;
+exports.logMessages = exports.bundle = exports.isEsBuildFailure = void 0;
 const esbuild_1 = require("esbuild");
-const path_1 = require("path");
-/** Default outdir setting for esbuild. */
-exports.DEFAULT_OUTDIR = (0, path_1.resolve)('/virtual-output');
 /**
  * Determines if an unknown value is an esbuild BuildFailure error object thrown by esbuild.
  * @param value A potential esbuild BuildFailure error object.

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

@@ -57,7 +57,7 @@ const stylesheets_1 = require("./stylesheets");
  */
 // eslint-disable-next-line max-lines-per-function
 async function buildEsbuildBrowser(options, context) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const startTime = Date.now();
     // Only AOT is currently supported
     if (options.aot !== true) {
@@ -101,7 +101,7 @@ async function buildEsbuildBrowser(options, context) {
         // Entries in the metafile are relative to the `absWorkingDir` option which is set to the workspaceRoot
         const relativeFilePath = path.relative(workspaceRoot, outputFile.path);
         const entryPoint = (_c = (_b = result.metafile) === null || _b === void 0 ? void 0 : _b.outputs[relativeFilePath]) === null || _c === void 0 ? void 0 : _c.entryPoint;
-        outputFile.path = path.relative(esbuild_1.DEFAULT_OUTDIR, outputFile.path);
+        outputFile.path = relativeFilePath;
         if (entryPoint) {
             // An entryPoint value indicates an initial file
             initialFiles.push({
@@ -124,15 +124,22 @@ async function buildEsbuildBrowser(options, context) {
     // Process global stylesheets
     if (options.styles) {
         // resolveGlobalStyles is temporarily reused from the Webpack builder code
-        const { entryPoints: stylesheetEntrypoints, noInjectNames } = (0, configs_1.resolveGlobalStyles)(options.styles, workspaceRoot, !!options.preserveSymlinks);
+        const { entryPoints: stylesheetEntrypoints, noInjectNames } = (0, configs_1.resolveGlobalStyles)(options.styles, workspaceRoot, 
+        // preserveSymlinks is always true here to allow the bundler to handle the option
+        true, 
+        // skipResolution to leverage the bundler's more comprehensive resolution
+        true);
         for (const [name, files] of Object.entries(stylesheetEntrypoints)) {
             const virtualEntryData = files
                 .map((file) => `@import '${file.replace(/\\/g, '/')}';`)
                 .join('\n');
             const sheetResult = await (0, stylesheets_1.bundleStylesheetText)(virtualEntryData, { virtualName: `angular:style/global;${name}`, resolvePath: workspaceRoot }, {
+                workspaceRoot,
                 optimization: !!optimizationOptions.styles.minify,
-                sourcemap: !!sourcemapOptions.styles,
+                sourcemap: !!sourcemapOptions.styles && (sourcemapOptions.hidden ? 'external' : true),
                 outputNames: noInjectNames.includes(name) ? { media: outputNames.media } : outputNames,
+                includePaths: (_e = options.stylePreprocessorOptions) === null || _e === void 0 ? void 0 : _e.includePaths,
+                preserveSymlinks: options.preserveSymlinks,
             });
             await (0, esbuild_1.logMessages)(context, sheetResult);
             if (!sheetResult.path) {
@@ -161,8 +168,8 @@ async function buildEsbuildBrowser(options, context) {
     // Generate index HTML file
     if (options.index) {
         const entrypoints = (0, package_chunk_sort_1.generateEntryPoints)({
-            scripts: (_e = options.scripts) !== null && _e !== void 0 ? _e : [],
-            styles: (_f = options.styles) !== null && _f !== void 0 ? _f : [],
+            scripts: (_f = options.scripts) !== null && _f !== void 0 ? _f : [],
+            styles: (_g = options.styles) !== null && _g !== void 0 ? _g : [],
         });
         // Create an index HTML generator that reads from the in-memory output files
         const indexHtmlGenerator = new index_html_generator_1.IndexHtmlGenerator({
@@ -228,6 +235,7 @@ function createOutputFileFromText(path, text) {
     };
 }
 async function bundleCode(workspaceRoot, entryPoints, outputNames, options, optimizationOptions, sourcemapOptions, tsconfig) {
+    var _a;
     return (0, esbuild_1.bundle)({
         absWorkingDir: workspaceRoot,
         bundle: true,
@@ -243,7 +251,7 @@ async function bundleCode(workspaceRoot, entryPoints, outputNames, options, opti
         metafile: true,
         minify: optimizationOptions.scripts,
         pure: ['forwardRef'],
-        outdir: esbuild_1.DEFAULT_OUTDIR,
+        outdir: workspaceRoot,
         sourcemap: sourcemapOptions.scripts && (sourcemapOptions.hidden ? 'external' : true),
         splitting: true,
         tsconfig,
@@ -256,6 +264,7 @@ async function bundleCode(workspaceRoot, entryPoints, outputNames, options, opti
             // JS/TS options
             {
                 sourcemap: !!sourcemapOptions.scripts,
+                thirdPartySourcemaps: sourcemapOptions.vendor,
                 tsconfig,
                 advancedOptimizations: options.buildOptimizer,
             }, 
@@ -269,10 +278,11 @@ async function bundleCode(workspaceRoot, entryPoints, outputNames, options, opti
                 // of sourcemap processing.
                 !!sourcemapOptions.styles && (sourcemapOptions.hidden ? false : 'inline'),
                 outputNames,
+                includePaths: (_a = options.stylePreprocessorOptions) === null || _a === void 0 ? void 0 : _a.includePaths,
             }),
         ],
         define: {
-            'ngDevMode': optimizationOptions.scripts ? 'false' : 'true',
+            ...(optimizationOptions.scripts ? { 'ngDevMode': 'false' } : undefined),
             'ngJitMode': 'false',
         },
     });

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

@@ -0,0 +1,12 @@
+/**
+ * @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 { Plugin } from 'esbuild';
+export declare function createSassPlugin(options: {
+    sourcemap: boolean;
+    includePaths?: string[];
+}): Plugin;

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

@@ -0,0 +1,52 @@
+"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.createSassPlugin = void 0;
+const sass_service_1 = require("../../sass/sass-service");
+function createSassPlugin(options) {
+    return {
+        name: 'angular-sass',
+        setup(build) {
+            let sass;
+            build.onStart(() => {
+                sass = new sass_service_1.SassWorkerImplementation();
+            });
+            build.onEnd(() => {
+                sass === null || sass === void 0 ? void 0 : sass.close();
+            });
+            build.onLoad({ filter: /\.s[ac]ss$/ }, async (args) => {
+                const result = await new Promise((resolve, reject) => {
+                    sass.render({
+                        file: args.path,
+                        includePaths: options.includePaths,
+                        indentedSyntax: args.path.endsWith('.sass'),
+                        outputStyle: 'expanded',
+                        sourceMap: options.sourcemap,
+                        sourceMapContents: options.sourcemap,
+                        sourceMapEmbed: options.sourcemap,
+                        quietDeps: true,
+                    }, (error, result) => {
+                        if (error) {
+                            reject(error);
+                        }
+                        if (result) {
+                            resolve(result);
+                        }
+                    });
+                });
+                return {
+                    contents: result.css,
+                    loader: 'css',
+                    watchFiles: result.stats.includedFiles,
+                };
+            });
+        },
+    };
+}
+exports.createSassPlugin = createSassPlugin;

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

@@ -7,7 +7,7 @@
  */
 import type { OutputFile } from 'esbuild';
 export interface BundleStylesheetOptions {
-    workspaceRoot?: string;
+    workspaceRoot: string;
     optimization: boolean;
     preserveSymlinks?: boolean;
     sourcemap: boolean | 'external' | 'inline';
@@ -15,6 +15,7 @@ export interface BundleStylesheetOptions {
         bundles?: string;
         media?: string;
     };
+    includePaths?: string[];
 }
 /**
  * Bundle a stylesheet that exists as a file on the filesystem.

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

@@ -33,6 +33,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.bundleStylesheetText = exports.bundleStylesheetFile = void 0;
 const path = __importStar(require("path"));
 const esbuild_1 = require("./esbuild");
+const sass_plugin_1 = require("./sass-plugin");
 async function bundleStylesheet(entry, options) {
     var _a, _b;
     // Execute esbuild
@@ -45,14 +46,14 @@ async function bundleStylesheet(entry, options) {
         logLevel: 'silent',
         minify: options.optimization,
         sourcemap: options.sourcemap,
-        outdir: esbuild_1.DEFAULT_OUTDIR,
+        outdir: options.workspaceRoot,
         write: false,
         platform: 'browser',
         preserveSymlinks: options.preserveSymlinks,
-        conditions: ['style'],
-        mainFields: ['style'],
+        conditions: ['style', 'sass'],
+        mainFields: ['style', 'sass'],
         plugins: [
-        // TODO: preprocessor plugins
+            (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, includePaths: options.includePaths }),
         ],
     });
     // Extract the result of the bundling from the output files
@@ -62,7 +63,7 @@ async function bundleStylesheet(entry, options) {
     const resourceFiles = [];
     if (result.outputFiles) {
         for (const outputFile of result.outputFiles) {
-            outputFile.path = path.relative(esbuild_1.DEFAULT_OUTDIR, outputFile.path);
+            outputFile.path = path.relative(options.workspaceRoot, outputFile.path);
             const filename = path.basename(outputFile.path);
             if (filename.endsWith('.css')) {
                 outputPath = outputFile.path;

package/src/utils/error.js

@@ -13,6 +13,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.assertIsError = void 0;
 const assert_1 = __importDefault(require("assert"));
 function assertIsError(value) {
-    (0, assert_1.default)(value instanceof Error, 'catch clause variable is not an Error instance');
+    const isError = value instanceof Error ||
+        // The following is needing to identify errors coming from RxJs.
+        (typeof value === 'object' && value && 'name' in value && 'message' in value);
+    (0, assert_1.default)(isError, 'catch clause variable is not an Error instance');
 }
 exports.assertIsError = assertIsError;

package/src/webpack/configs/common.js

@@ -43,12 +43,14 @@ const webpack_subresource_integrity_1 = require("webpack-subresource-integrity")
 const environment_options_1 = require("../../utils/environment-options");
 const load_esm_1 = require("../../utils/load-esm");
 const plugins_1 = require("../plugins");
+const devtools_ignore_plugin_1 = require("../plugins/devtools-ignore-plugin");
 const named_chunks_plugin_1 = require("../plugins/named-chunks-plugin");
 const progress_plugin_1 = require("../plugins/progress-plugin");
 const transfer_size_plugin_1 = require("../plugins/transfer-size-plugin");
 const typescript_2 = require("../plugins/typescript");
 const watch_files_logs_plugin_1 = require("../plugins/watch-files-logs-plugin");
 const helpers_1 = require("../utils/helpers");
+const VENDORS_TEST = /[\\/]node_modules[\\/]/;
 // eslint-disable-next-line max-lines-per-function
 async function getCommonConfig(wco) {
     var _a, _b;
@@ -132,6 +134,7 @@ async function getCommonConfig(wco) {
         if (stylesSourceMap) {
             include.push(/css$/);
         }
+        extraPlugins.push(new devtools_ignore_plugin_1.DevToolsIgnorePlugin());
         extraPlugins.push(new webpack_2.SourceMapDevToolPlugin({
             filename: '[file].map',
             include,
@@ -307,7 +310,7 @@ async function getCommonConfig(wco) {
                                 supportedBrowsers: buildOptions.supportedBrowsers,
                                 instrumentCode: codeCoverage
                                     ? {
-                                        includedBasePath: sourceRoot,
+                                        includedBasePath: sourceRoot !== null && sourceRoot !== void 0 ? sourceRoot : projectRoot,
                                         excludedPaths: (0, helpers_1.getInstrumentationExcludedPaths)(root, codeCoverageExclude),
                                     }
                                     : undefined,
@@ -355,7 +358,7 @@ async function getCommonConfig(wco) {
                         name: 'vendor',
                         chunks: (chunk) => chunk.name === 'main',
                         enforce: true,
-                        test: /[\\/]node_modules[\\/]/,
+                        test: VENDORS_TEST,
                     },
                 },
             },

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

@@ -98,6 +98,23 @@ async function getDevServerConfig(wco) {
                 publicPath: servePath,
                 stats: false,
             },
+            setupMiddlewares: (middlewares, _devServer) => {
+                // Temporary workaround for https://github.com/webpack/webpack-dev-server/issues/4180
+                middlewares.push({
+                    name: 'options-request-response',
+                    path: '*',
+                    middleware: (req, res, next) => {
+                        if (req.method === 'OPTIONS') {
+                            res.statusCode = 204;
+                            res.setHeader('Content-Length', 0);
+                            res.end();
+                            return;
+                        }
+                        next();
+                    },
+                });
+                return middlewares;
+            },
             liveReload,
             hot: hmr && !liveReload ? 'only' : hmr,
             proxy: await addProxyConfig(root, proxyConfig),

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

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

package/src/webpack/configs/styles.js

@@ -41,7 +41,7 @@ const sass_service_1 = require("../../sass/sass-service");
 const plugins_1 = require("../plugins");
 const css_optimizer_plugin_1 = require("../plugins/css-optimizer-plugin");
 const helpers_1 = require("../utils/helpers");
-function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks) {
+function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks, skipResolution = false) {
     const entryPoints = {};
     const noInjectNames = [];
     const paths = [];
@@ -49,29 +49,32 @@ function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks) {
         return { entryPoints, noInjectNames, paths };
     }
     for (const style of (0, helpers_1.normalizeExtraEntryPoints)(styleEntrypoints, 'styles')) {
-        let resolvedPath = path.resolve(root, style.input);
-        if (!fs.existsSync(resolvedPath)) {
-            try {
-                resolvedPath = require.resolve(style.input, { paths: [root] });
+        let stylesheetPath = style.input;
+        if (!skipResolution) {
+            stylesheetPath = path.resolve(root, stylesheetPath);
+            if (!fs.existsSync(stylesheetPath)) {
+                try {
+                    stylesheetPath = require.resolve(style.input, { paths: [root] });
+                }
+                catch { }
             }
-            catch { }
         }
         if (!preserveSymlinks) {
-            resolvedPath = fs.realpathSync(resolvedPath);
+            stylesheetPath = fs.realpathSync(stylesheetPath);
         }
         // Add style entry points.
         if (entryPoints[style.bundleName]) {
-            entryPoints[style.bundleName].push(resolvedPath);
+            entryPoints[style.bundleName].push(stylesheetPath);
         }
         else {
-            entryPoints[style.bundleName] = [resolvedPath];
+            entryPoints[style.bundleName] = [stylesheetPath];
         }
         // Add non injected styles to the list.
         if (!style.inject) {
             noInjectNames.push(style.bundleName);
         }
         // Add global css paths.
-        paths.push(resolvedPath);
+        paths.push(stylesheetPath);
     }
     return { entryPoints, noInjectNames, paths };
 }

package/src/webpack/plugins/devtools-ignore-plugin.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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 { Compiler } from 'webpack';
+/**
+ * This plugin adds a field to source maps that identifies which sources are
+ * vendored or runtime-injected (aka third-party) sources. These are consumed by
+ * Chrome DevTools to automatically ignore-list sources.
+ */
+export declare class DevToolsIgnorePlugin {
+    apply(compiler: Compiler): void;
+}

package/src/webpack/plugins/devtools-ignore-plugin.js

@@ -0,0 +1,56 @@
+"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.DevToolsIgnorePlugin = void 0;
+const webpack_1 = require("webpack");
+// Following the naming conventions from
+// https://sourcemaps.info/spec.html#h.ghqpj1ytqjbm
+const IGNORE_LIST = 'x_google_ignoreList';
+const PLUGIN_NAME = 'devtools-ignore-plugin';
+/**
+ * This plugin adds a field to source maps that identifies which sources are
+ * vendored or runtime-injected (aka third-party) sources. These are consumed by
+ * Chrome DevTools to automatically ignore-list sources.
+ */
+class DevToolsIgnorePlugin {
+    apply(compiler) {
+        const { RawSource } = compiler.webpack.sources;
+        compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.processAssets.tap({
+                name: PLUGIN_NAME,
+                stage: webpack_1.Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
+                additionalAssets: true,
+            }, (assets) => {
+                for (const [name, asset] of Object.entries(assets)) {
+                    // Instead of using `asset.map()` to fetch the source maps from
+                    // SourceMapSource assets, process them directly as a RawSource.
+                    // This is because `.map()` is slow and can take several seconds.
+                    if (!name.endsWith('.map')) {
+                        // Ignore non source map files.
+                        continue;
+                    }
+                    const mapContent = asset.source().toString();
+                    if (!mapContent) {
+                        continue;
+                    }
+                    const map = JSON.parse(mapContent);
+                    const ignoreList = [];
+                    for (const [index, path] of map.sources.entries()) {
+                        if (path.includes('/node_modules/') || path.startsWith('webpack/')) {
+                            ignoreList.push(index);
+                        }
+                    }
+                    map[IGNORE_LIST] = ignoreList;
+                    compilation.updateAsset(name, new RawSource(JSON.stringify(map)));
+                }
+            });
+        });
+    }
+}
+exports.DevToolsIgnorePlugin = DevToolsIgnorePlugin;

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

@@ -35,6 +35,10 @@ const loader_utils_1 = require("loader-utils");
 const path = __importStar(require("path"));
 const webpack_1 = require("webpack");
 const Entrypoint = require('webpack/lib/Entrypoint');
+/**
+ * The name of the plugin provided to Webpack when tapping Webpack compiler hooks.
+ */
+const PLUGIN_NAME = 'scripts-webpack-plugin';
 function addDependencies(compilation, scripts) {
     for (const script of scripts) {
         compilation.fileDependencies.add(script);
@@ -88,8 +92,8 @@ class ScriptsWebpackPlugin {
         const scripts = this.options.scripts
             .filter((script) => !!script)
             .map((script) => path.resolve(this.options.basePath || '', script));
-        compiler.hooks.thisCompilation.tap('scripts-webpack-plugin', (compilation) => {
-            compilation.hooks.additionalAssets.tapPromise('scripts-webpack-plugin', async () => {
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.additionalAssets.tapPromise(PLUGIN_NAME, async () => {
                 if (await this.shouldSkip(compilation, scripts)) {
                     if (this._cachedOutput) {
                         this._insertOutput(compilation, this._cachedOutput, true);
@@ -129,14 +133,24 @@ class ScriptsWebpackPlugin {
                     concatSource.add('\n;');
                 });
                 const combinedSource = new webpack_1.sources.CachedSource(concatSource);
-                const filename = (0, loader_utils_1.interpolateName)({ resourcePath: 'scripts.js' }, this.options.filename, {
-                    content: combinedSource.source(),
-                });
-                const output = { filename, source: combinedSource };
+                const output = { filename: this.options.filename, source: combinedSource };
                 this._insertOutput(compilation, output);
                 this._cachedOutput = output;
                 addDependencies(compilation, scripts);
             });
+            compilation.hooks.processAssets.tapPromise({
+                name: PLUGIN_NAME,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
+            }, async () => {
+                const assetName = this.options.filename;
+                const asset = compilation.getAsset(assetName);
+                if (asset) {
+                    const interpolatedFilename = (0, loader_utils_1.interpolateName)({ resourcePath: 'scripts.js' }, assetName, { content: asset.source.source() });
+                    if (assetName !== interpolatedFilename) {
+                        compilation.renameAsset(assetName, interpolatedFilename);
+                    }
+                }
+            });
         });
     }
 }