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

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/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];
             }
         }
     }
@@ -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.js

@@ -37,8 +37,9 @@ exports.getStylesConfig = exports.resolveGlobalStyles = void 0;
 const fs = __importStar(require("fs"));
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const path = __importStar(require("path"));
-const webpack_1 = require("webpack");
 const sass_service_1 = require("../../sass/sass-service");
+const sass_service_legacy_1 = require("../../sass/sass-service-legacy");
+const environment_options_1 = require("../../utils/environment-options");
 const plugins_1 = require("../plugins");
 const css_optimizer_plugin_1 = require("../plugins/css-optimizer-plugin");
 const helpers_1 = require("../utils/helpers");
@@ -83,7 +84,7 @@ exports.resolveGlobalStyles = resolveGlobalStyles;
 // eslint-disable-next-line max-lines-per-function
 function getStylesConfig(wco) {
     var _a, _b, _c;
-    const { root, buildOptions } = wco;
+    const { root, projectRoot, buildOptions } = wco;
     const extraPlugins = [];
     extraPlugins.push(new plugins_1.AnyComponentStyleBudgetChecker(buildOptions.budgets));
     const cssSourceMap = buildOptions.sourceMap.styles;
@@ -97,19 +98,14 @@ function getStylesConfig(wco) {
         // 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 +143,6 @@ function getStylesConfig(wco) {
                 : undefined,
             plugins: [
                 postcssImports({
-                    resolve: (url) => (url.startsWith('~') ? url.slice(1) : url),
                     load: (filename) => {
                         return new Promise((resolve, reject) => {
                             loader.fs.readFile(filename, (err, data) => {
@@ -243,30 +238,7 @@ function getStylesConfig(wco) {
                 },
                 {
                     loader: require.resolve('sass-loader'),
-                    options: {
-                        implementation: sassImplementation,
-                        sourceMap: true,
-                        sassOptions: {
-                            importer: (url, from) => {
-                                if (url.charAt(0) === '~') {
-                                    sassTildeUsageMessage.add(`'${from}' imports '${url}' with a tilde. Usage of '~' in imports is deprecated.`);
-                                }
-                                return null;
-                            },
-                            // Prevent use of `fibers` package as it no longer works in newer Node.js versions
-                            fiber: false,
-                            // bootstrap-sass requires a minimum precision of 8
-                            precision: 8,
-                            includePaths,
-                            // Use expanded as otherwise sass will remove comments that are needed for autoprefixer
-                            // Ex: /* autoprefixer grid: autoplace */
-                            // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
-                            outputStyle: 'expanded',
-                            // Silences compiler warnings from 3rd party stylesheets
-                            quietDeps: !buildOptions.verbose,
-                            verbose: buildOptions.verbose,
-                        },
-                    },
+                    options: getSassLoaderOptions(root, projectRoot, sassImplementation, includePaths, false, !buildOptions.verbose),
                 },
             ],
         },
@@ -281,31 +253,7 @@ function getStylesConfig(wco) {
                 },
                 {
                     loader: require.resolve('sass-loader'),
-                    options: {
-                        implementation: sassImplementation,
-                        sourceMap: true,
-                        sassOptions: {
-                            importer: (url, from) => {
-                                if (url.charAt(0) === '~') {
-                                    sassTildeUsageMessage.add(`'${from}' imports '${url}' with a tilde. Usage of '~' in imports is deprecated.`);
-                                }
-                                return null;
-                            },
-                            // Prevent use of `fibers` package as it no longer works in newer Node.js versions
-                            fiber: false,
-                            indentedSyntax: true,
-                            // bootstrap-sass requires a minimum precision of 8
-                            precision: 8,
-                            includePaths,
-                            // Use expanded as otherwise sass will remove comments that are needed for autoprefixer
-                            // Ex: /* autoprefixer grid: autoplace */
-                            // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
-                            outputStyle: 'expanded',
-                            // Silences compiler warnings from 3rd party stylesheets
-                            quietDeps: !buildOptions.verbose,
-                            verbose: buildOptions.verbose,
-                        },
-                    },
+                    options: getSassLoaderOptions(root, projectRoot, sassImplementation, includePaths, true, !buildOptions.verbose),
                 },
             ],
         },
@@ -382,3 +330,58 @@ function getTailwindConfigPath({ projectRoot, root }) {
     }
     return undefined;
 }
+function getSassLoaderOptions(root, projectRoot, implementation, includePaths, indentedSyntax, verbose) {
+    return implementation instanceof sass_service_1.SassWorkerImplementation
+        ? {
+            sourceMap: true,
+            api: 'modern',
+            implementation,
+            // Webpack importer is only implemented in the legacy API.
+            // See: https://github.com/webpack-contrib/sass-loader/blob/997f3eb41d86dd00d5fa49c395a1aeb41573108c/src/utils.js#L642-L651
+            webpackImporter: false,
+            sassOptions: {
+                loadPaths: [
+                    ...includePaths,
+                    // Needed to resolve node packages and retain the same behaviour of with the legacy API as sass-loader resolves
+                    // scss also from the cwd and project root.
+                    // See: https://github.com/webpack-contrib/sass-loader/blob/997f3eb41d86dd00d5fa49c395a1aeb41573108c/src/utils.js#L307
+                    projectRoot,
+                    path.join(root, 'node_modules'),
+                ],
+                // Use expanded as otherwise sass will remove comments that are needed for autoprefixer
+                // Ex: /* autoprefixer grid: autoplace */
+                // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
+                style: 'expanded',
+                // Silences compiler warnings from 3rd party stylesheets
+                quietDeps: !verbose,
+                verbose,
+                syntax: indentedSyntax ? 'indented' : 'scss',
+            },
+        }
+        : {
+            sourceMap: true,
+            api: 'legacy',
+            implementation,
+            sassOptions: {
+                importer: (url, from) => {
+                    if (url.charAt(0) === '~') {
+                        throw new Error(`'${from}' imports '${url}' with a tilde. Usage of '~' in imports is no longer supported.`);
+                    }
+                    return null;
+                },
+                // Prevent use of `fibers` package as it no longer works in newer Node.js versions
+                fiber: false,
+                indentedSyntax,
+                // bootstrap-sass requires a minimum precision of 8
+                precision: 8,
+                includePaths,
+                // Use expanded as otherwise sass will remove comments that are needed for autoprefixer
+                // Ex: /* autoprefixer grid: autoplace */
+                // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
+                outputStyle: 'expanded',
+                // Silences compiler warnings from 3rd party stylesheets
+                quietDeps: !verbose,
+                verbose,
+            },
+        };
+}

package/src/webpack/plugins/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/transfer-size-plugin.js

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

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

@@ -28,5 +28,4 @@ export declare function globalScriptsByBundleName(root: string, scripts: ScriptE
     paths: string[];
 }[];
 export declare function assetPatterns(root: string, assets: AssetPatternClass[]): ObjectPattern[];
-export declare function externalizePackages(context: string, request: string | undefined, callback: (error?: Error, result?: string) => void): void;
 export declare function getStatsOptions(verbose?: boolean): WebpackStatsOptions;

package/src/webpack/utils/helpers.js

@@ -33,7 +33,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStatsOptions = exports.externalizePackages = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
+exports.getStatsOptions = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
 const crypto_1 = require("crypto");
 const fs_1 = require("fs");
 const glob_1 = __importDefault(require("glob"));
@@ -231,25 +231,6 @@ function assetPatterns(root, assets) {
     });
 }
 exports.assetPatterns = assetPatterns;
-function externalizePackages(context, request, callback) {
-    if (!request) {
-        return;
-    }
-    // Absolute & Relative paths are not externals
-    if (request.startsWith('.') || path.isAbsolute(request)) {
-        callback();
-        return;
-    }
-    try {
-        require.resolve(request, { paths: [context] });
-        callback(undefined, request);
-    }
-    catch {
-        // Node couldn't find it, so it must be user-aliased
-        callback();
-    }
-}
-exports.externalizePackages = externalizePackages;
 function getStatsOptions(verbose = false) {
     const webpackOutputOptions = {
         all: false,

package/src/webpack/plugins/single-test-transform.d.ts

@@ -1,27 +0,0 @@
-/**
- * @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 { logging } from '@angular-devkit/core';
-export interface SingleTestTransformLoaderOptions {
-    files?: string[];
-    logger?: logging.Logger;
-}
-export declare const SingleTestTransformLoader: string;
-/**
- * This loader transforms the default test file to only run tests
- * for some specs instead of all specs.
- * It works by replacing the known content of the auto-generated test file:
- *   const context = require.context('./', true, /\.spec\.ts$/);
- *   context.keys().map(context);
- * with:
- *   const context = { keys: () => ({ map: (_a) => { } }) };
- *   context.keys().map(context);
- * So that it does nothing.
- * Then it adds import statements for each file in the files options
- * array to import them directly, and thus run the tests there.
- */
-export default function loader(this: import('webpack').LoaderContext<SingleTestTransformLoaderOptions>, source: string): string;

package/src/webpack/plugins/single-test-transform.js

@@ -1,44 +0,0 @@
-"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.SingleTestTransformLoader = void 0;
-const core_1 = require("@angular-devkit/core");
-const path_1 = require("path");
-exports.SingleTestTransformLoader = __filename;
-/**
- * This loader transforms the default test file to only run tests
- * for some specs instead of all specs.
- * It works by replacing the known content of the auto-generated test file:
- *   const context = require.context('./', true, /\.spec\.ts$/);
- *   context.keys().map(context);
- * with:
- *   const context = { keys: () => ({ map: (_a) => { } }) };
- *   context.keys().map(context);
- * So that it does nothing.
- * Then it adds import statements for each file in the files options
- * array to import them directly, and thus run the tests there.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function loader(source) {
-    const { files = [], logger = console } = this.getOptions();
-    // signal the user that expected content is not present.
-    if (!source.includes('require.context(')) {
-        logger.error(core_1.tags.stripIndent `The 'include' option requires that the 'main' file for tests includes the below line:
-      const context = require.context('./', true, /\.spec\.ts$/);
-      Arguments passed to require.context are not strict and can be changed.`);
-        return source;
-    }
-    const targettedImports = files
-        .map((path) => `require('./${path.replace('.' + (0, path_1.extname)(path), '')}');`)
-        .join('\n');
-    const mockedRequireContext = 'Object.assign(() => { }, { keys: () => [], resolve: () => undefined });\n';
-    source = source.replace(/require\.context\(.*/, mockedRequireContext + targettedImports);
-    return source;
-}
-exports.default = loader;