@angular-devkit/build-angular 13.0.0 → 13.1.0-next.0

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "13.0.0",
+  "version": "13.1.0-next.0",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "1.0.1",
-    "@angular-devkit/architect": "0.1300.0",
-    "@angular-devkit/build-webpack": "0.1300.0",
-    "@angular-devkit/core": "13.0.0",
-    "@babel/core": "7.15.8",
-    "@babel/generator": "7.15.8",
-    "@babel/helper-annotate-as-pure": "7.15.4",
-    "@babel/plugin-proposal-async-generator-functions": "7.15.8",
-    "@babel/plugin-transform-async-to-generator": "7.14.5",
-    "@babel/plugin-transform-runtime": "7.15.8",
-    "@babel/preset-env": "7.15.8",
-    "@babel/runtime": "7.15.4",
-    "@babel/template": "7.15.4",
+    "@angular-devkit/architect": "0.1301.0-next.0",
+    "@angular-devkit/build-webpack": "0.1301.0-next.0",
+    "@angular-devkit/core": "13.1.0-next.0",
+    "@babel/core": "7.16.0",
+    "@babel/generator": "7.16.0",
+    "@babel/helper-annotate-as-pure": "7.16.0",
+    "@babel/plugin-proposal-async-generator-functions": "7.16.0",
+    "@babel/plugin-transform-async-to-generator": "7.16.0",
+    "@babel/plugin-transform-runtime": "7.16.0",
+    "@babel/preset-env": "7.16.0",
+    "@babel/runtime": "7.16.0",
+    "@babel/template": "7.16.0",
     "@discoveryjs/json-ext": "0.5.5",
-    "@ngtools/webpack": "13.0.0",
+    "@ngtools/webpack": "13.1.0-next.0",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.3",
     "babel-plugin-istanbul": "6.1.1",
@@ -29,7 +29,7 @@
     "caniuse-lite": "^1.0.30001032",
     "circular-dependency-plugin": "5.2.2",
     "copy-webpack-plugin": "9.0.1",
-    "core-js": "3.19.0",
+    "core-js": "3.19.1",
     "critters": "0.0.14",
     "css-loader": "6.5.0",
     "esbuild-wasm": "0.13.12",
@@ -40,7 +40,7 @@
     "less": "4.1.2",
     "less-loader": "10.2.0",
     "license-webpack-plugin": "3.0.0",
-    "loader-utils": "3.0.0",
+    "loader-utils": "3.1.0",
     "mini-css-extract-plugin": "2.4.3",
     "minimatch": "3.0.4",
     "open": "8.4.0",
@@ -65,7 +65,7 @@
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.3.1",
-    "webpack": "5.60.0",
+    "webpack": "5.61.0",
     "webpack-dev-middleware": "5.2.1",
     "webpack-dev-server": "4.4.0",
     "webpack-merge": "5.8.0",

package/src/builders/browser/index.js

@@ -59,12 +59,8 @@ async function initialize(options, context, webpackConfigurationTransform) {
     const adjustedOptions = options.watch ? options : { ...options, assets: [] };
     const { config, projectRoot, projectSourceRoot, i18n, target } = await (0, webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext)(adjustedOptions, context, (wco) => [
         (0, configs_1.getCommonConfig)(wco),
-        (0, configs_1.getBrowserConfig)(wco),
         (0, configs_1.getStylesConfig)(wco),
-        (0, configs_1.getStatsConfig)(wco),
         (0, configs_1.getAnalyticsConfig)(wco, context),
-        (0, configs_1.getTypeScriptConfig)(wco),
-        wco.buildOptions.webWorkerTsConfig ? (0, configs_1.getWorkerConfig)(wco) : {},
     ]);
     // Validate asset option values if processed directly
     if (((_a = options.assets) === null || _a === void 0 ? void 0 : _a.length) && !((_b = adjustedOptions.assets) === null || _b === void 0 ? void 0 : _b.length)) {

package/src/builders/dev-server/index.js

@@ -124,12 +124,8 @@ function serveWebpackBrowser(options, context, transforms = {}) {
         const { config, projectRoot, i18n } = await (0, webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext)(browserOptions, context, (wco) => [
             (0, configs_1.getDevServerConfig)(wco),
             (0, configs_1.getCommonConfig)(wco),
-            (0, configs_1.getBrowserConfig)(wco),
             (0, configs_1.getStylesConfig)(wco),
-            (0, configs_1.getStatsConfig)(wco),
             (0, configs_1.getAnalyticsConfig)(wco, context),
-            (0, configs_1.getTypeScriptConfig)(wco),
-            browserOptions.webWorkerTsConfig ? (0, configs_1.getWorkerConfig)(wco) : {},
         ], options);
         if (!config.devServer) {
             throw new Error('Webpack Dev Server configuration was not set.');

package/src/builders/extract-i18n/index.js

@@ -166,6 +166,7 @@ async function execute(options, context, transforms) {
         subresourceIntegrity: false,
         outputHashing: schema_1.OutputHashing.None,
         namedChunks: true,
+        allowedCommonJsDependencies: undefined,
     };
     const { config, projectRoot } = await (0, webpack_browser_config_1.generateBrowserWebpackConfigFromContext)(builderOptions, context, (wco) => {
         var _a;
@@ -174,10 +175,6 @@ async function execute(options, context, transforms) {
         const partials = [
             { plugins: [new NoEmitPlugin()] },
             (0, configs_1.getCommonConfig)(wco),
-            (0, configs_1.getBrowserConfig)(wco),
-            (0, configs_1.getTypeScriptConfig)(wco),
-            (0, configs_1.getWorkerConfig)(wco),
-            (0, configs_1.getStatsConfig)(wco),
         ];
         // Add Ivy application file extractor support
         partials.unshift({

package/src/builders/karma/index.d.ts

@@ -8,7 +8,7 @@
 import { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
 import { ConfigOptions } from 'karma';
 import { Observable } from 'rxjs';
-import * as webpack from 'webpack';
+import { Configuration } from 'webpack';
 import { ExecutionTransformer } from '../../transforms';
 import { Schema as KarmaBuilderOptions } from './schema';
 export declare type KarmaConfigOptions = ConfigOptions & {
@@ -19,7 +19,7 @@ export declare type KarmaConfigOptions = ConfigOptions & {
  * @experimental Direct usage of this function is considered experimental.
  */
 export declare function execute(options: KarmaBuilderOptions, context: BuilderContext, transforms?: {
-    webpackConfiguration?: ExecutionTransformer<webpack.Configuration>;
+    webpackConfiguration?: ExecutionTransformer<Configuration>;
     karmaOptions?: (options: KarmaConfigOptions) => KarmaConfigOptions;
 }): Observable<BuilderOutput>;
 export { KarmaBuilderOptions };

package/src/builders/karma/index.js

@@ -59,13 +59,7 @@ async function initialize(options, context, webpackConfigurationTransformer) {
         // https://github.com/webpack/webpack-dev-middleware/blob/698c9ae5e9bb9a013985add6189ff21c1a1ec185/src/index.js#L65
         // https://github.com/webpack/webpack/blob/cde1b73e12eb8a77eb9ba42e7920c9ec5d29c2c9/lib/Compiler.js#L379-L388
         watch: true,
-    }, context, (wco) => [
-        (0, configs_1.getCommonConfig)(wco),
-        (0, configs_1.getStylesConfig)(wco),
-        (0, configs_1.getTypeScriptConfig)(wco),
-        (0, configs_1.getTestConfig)(wco),
-        (0, configs_1.getWorkerConfig)(wco),
-    ]);
+    }, context, (wco) => [(0, configs_1.getCommonConfig)(wco), (0, configs_1.getStylesConfig)(wco)]);
     const karma = await Promise.resolve().then(() => __importStar(require('karma')));
     return [
         karma,

package/src/builders/server/index.js

@@ -109,13 +109,7 @@ async function initialize(options, context, webpackConfigurationTransform) {
         buildOptimizer: false,
         aot: true,
         platform: 'server',
-    }, context, (wco) => [
-        (0, configs_1.getCommonConfig)(wco),
-        (0, configs_1.getServerConfig)(wco),
-        (0, configs_1.getStylesConfig)(wco),
-        (0, configs_1.getStatsConfig)(wco),
-        (0, configs_1.getTypeScriptConfig)(wco),
-    ]);
+    }, context, (wco) => [(0, configs_1.getCommonConfig)(wco), (0, configs_1.getStylesConfig)(wco)]);
     let transformedConfig;
     if (webpackConfigurationTransform) {
         transformedConfig = await webpackConfigurationTransform(config);

package/src/utils/build-options.d.ts

@@ -59,8 +59,6 @@ export interface BuildOptions {
     inlineStyleLanguage?: InlineStyleLanguage;
     allowedCommonJsDependencies?: string[];
     cache: NormalizedCachedOptions;
-}
-export interface WebpackTestOptions extends BuildOptions {
     codeCoverage?: boolean;
     codeCoverageExclude?: string[];
 }

package/src/utils/i18n-inlining.js

@@ -32,7 +32,7 @@ const path = __importStar(require("path"));
 const action_executor_1 = require("./action-executor");
 const copy_assets_1 = require("./copy-assets");
 const spinner_1 = require("./spinner");
-function emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emittedPath, outputPath, es5, missingTranslation) {
+function emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emittedPath, outputPath, es5, missingTranslation, context) {
     const options = [];
     const originalFiles = [];
     for (const emittedFile of emittedFiles) {
@@ -51,16 +51,31 @@ function emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emitte
             setLocale: emittedFile.name === 'main' || emittedFile.name === 'vendor',
         };
         originalFiles.push(originalPath);
+        // Remove temporary original file as the content has now been read
+        try {
+            fs.unlinkSync(originalPath);
+        }
+        catch (e) {
+            context.logger.debug(`Unable to delete i18n temporary file [${originalPath}]: ${e.toString()}`);
+        }
         try {
             const originalMapPath = originalPath + '.map';
             action.map = fs.readFileSync(originalMapPath, 'utf8');
             originalFiles.push(originalMapPath);
+            // Remove temporary original map file as the content has now been read
+            try {
+                fs.unlinkSync(originalMapPath);
+            }
+            catch (e) {
+                context.logger.debug(`Unable to delete i18n temporary file [${originalMapPath}]: ${e.toString()}`);
+            }
         }
         catch (err) {
             if (err.code !== 'ENOENT') {
                 throw err;
             }
         }
+        context.logger.debug(`i18n file queued for processing: ${action.filename}`);
         options.push(action);
     }
     return { options, originalFiles };
@@ -71,8 +86,9 @@ async function i18nInlineEmittedFiles(context, emittedFiles, i18n, baseOutputPat
     const spinner = new spinner_1.Spinner();
     spinner.start('Generating localized bundles...');
     try {
-        const { options, originalFiles: processedFiles } = emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emittedPath, baseOutputPath, es5, missingTranslation);
+        const { options, originalFiles: processedFiles } = emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emittedPath, baseOutputPath, es5, missingTranslation, context);
         for await (const result of executor.inlineAll(options)) {
+            context.logger.debug(`i18n file processed: ${result.file}`);
             for (const diagnostic of result.diagnostics) {
                 spinner.stop();
                 if (diagnostic.type === 'error') {

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

@@ -6,5 +6,5 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { Configuration } from 'webpack';
-import { WebpackConfigOptions, WebpackTestOptions } from '../../utils/build-options';
-export declare function getCommonConfig(wco: WebpackConfigOptions<WebpackTestOptions>): Promise<Configuration>;
+import { WebpackConfigOptions } from '../../utils/build-options';
+export declare function getCommonConfig(wco: WebpackConfigOptions): Promise<Configuration>;

package/src/webpack/configs/common.js

@@ -30,25 +30,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCommonConfig = void 0;
+const webpack_1 = require("@ngtools/webpack");
 const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
-const crypto_1 = require("crypto");
-const fs_1 = require("fs");
 const path = __importStar(require("path"));
 const typescript_1 = require("typescript");
-const webpack_1 = require("webpack");
+const webpack_2 = require("webpack");
+const webpack_subresource_integrity_1 = require("webpack-subresource-integrity");
 const utils_1 = require("../../utils");
 const environment_options_1 = require("../../utils/environment-options");
 const load_esm_1 = require("../../utils/load-esm");
-const spinner_1 = require("../../utils/spinner");
-const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const plugins_1 = require("../plugins");
-const javascript_optimizer_plugin_1 = require("../plugins/javascript-optimizer-plugin");
+const progress_plugin_1 = require("../plugins/progress-plugin");
+const typescript_2 = require("../plugins/typescript");
 const helpers_1 = require("../utils/helpers");
 // eslint-disable-next-line max-lines-per-function
 async function getCommonConfig(wco) {
     var _a, _b;
-    const { root, projectRoot, buildOptions, tsConfig, projectName, sourceRoot } = wco;
-    const { cache, codeCoverage, codeCoverageExclude = [], platform = 'browser', sourceMap: { styles: stylesSourceMap, scripts: scriptsSourceMap, vendor: vendorSourceMap }, optimization: { styles: stylesOptimization, scripts: scriptsOptimization }, } = buildOptions;
+    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 isPlatformServer = buildOptions.platform === 'server';
     const extraPlugins = [];
     const extraRules = [];
     const entryPoints = {};
@@ -63,32 +63,17 @@ async function getCommonConfig(wco) {
     const hashFormat = (0, helpers_1.getOutputHashFormat)(buildOptions.outputHashing || 'none');
     const buildBrowserFeatures = new utils_1.BuildBrowserFeatures(projectRoot);
     if (buildOptions.progress) {
-        const spinner = new spinner_1.Spinner();
-        spinner.start(`Generating ${platform} application bundles (phase: setup)...`);
-        extraPlugins.push(new webpack_1.ProgressPlugin({
-            handler: (percentage, message) => {
-                const phase = message ? ` (phase: ${message})` : '';
-                spinner.text = `Generating ${platform} application bundles${phase}...`;
-                switch (percentage) {
-                    case 1:
-                        if (spinner.isSpinning) {
-                            spinner.succeed(`${platform.replace(/^\w/, (s) => s.toUpperCase())} application bundle generation complete.`);
-                        }
-                        break;
-                    case 0:
-                        if (!spinner.isSpinning) {
-                            spinner.start();
-                        }
-                        break;
-                }
-            },
-        }));
+        extraPlugins.push(new progress_plugin_1.ProgressPlugin(platform));
     }
     if (buildOptions.main) {
         const mainPath = path.resolve(root, buildOptions.main);
         entryPoints['main'] = [mainPath];
     }
-    if (platform !== 'server') {
+    if (isPlatformServer) {
+        // 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']) {
@@ -109,89 +94,34 @@ async function getCommonConfig(wco) {
         }
     }
     if (environment_options_1.profilingEnabled) {
-        extraPlugins.push(new webpack_1.debug.ProfilingPlugin({
+        extraPlugins.push(new webpack_2.debug.ProfilingPlugin({
             outputPath: path.resolve(root, 'chrome-profiler-events.json'),
         }));
     }
+    if (allowedCommonJsDependencies) {
+        // When this is not defined it means the builder doesn't support showing common js usages.
+        // When it does it will be an array.
+        extraPlugins.push(new plugins_1.CommonJsUsageWarnPlugin({
+            allowedDependencies: allowedCommonJsDependencies,
+        }));
+    }
     // process global scripts
-    const globalScriptsByBundleName = (0, helpers_1.normalizeExtraEntryPoints)(buildOptions.scripts, 'scripts').reduce((prev, curr) => {
-        const { bundleName, inject, input } = curr;
-        let resolvedPath = path.resolve(root, input);
-        if (!(0, fs_1.existsSync)(resolvedPath)) {
-            try {
-                resolvedPath = require.resolve(input, { paths: [root] });
-            }
-            catch {
-                throw new Error(`Script file ${input} does not exist.`);
-            }
-        }
-        const existingEntry = prev.find((el) => el.bundleName === bundleName);
-        if (existingEntry) {
-            if (existingEntry.inject && !inject) {
-                // All entries have to be lazy for the bundle to be lazy.
-                throw new Error(`The ${bundleName} bundle is mixing injected and non-injected scripts.`);
-            }
-            existingEntry.paths.push(resolvedPath);
-        }
-        else {
-            prev.push({
-                bundleName,
-                inject,
-                paths: [resolvedPath],
-            });
-        }
-        return prev;
-    }, []);
     // Add a new asset for each entry.
-    for (const script of globalScriptsByBundleName) {
+    for (const { bundleName, inject, paths } of (0, helpers_1.globalScriptsByBundleName)(root, buildOptions.scripts)) {
         // Lazy scripts don't get a hash, otherwise they can't be loaded by name.
-        const hash = script.inject ? hashFormat.script : '';
-        const bundleName = script.bundleName;
+        const hash = inject ? hashFormat.script : '';
         extraPlugins.push(new plugins_1.ScriptsWebpackPlugin({
             name: bundleName,
             sourceMap: scriptsSourceMap,
+            scripts: paths,
             filename: `${path.basename(bundleName)}${hash}.js`,
-            scripts: script.paths,
             basePath: projectRoot,
         }));
     }
     // process asset entries
     if (buildOptions.assets.length) {
-        const copyWebpackPluginPatterns = buildOptions.assets.map((asset, index) => {
-            // Resolve input paths relative to workspace root and add slash at the end.
-            // eslint-disable-next-line prefer-const
-            let { input, output, ignore = [], glob } = asset;
-            input = path.resolve(root, input).replace(/\\/g, '/');
-            input = input.endsWith('/') ? input : input + '/';
-            output = output.endsWith('/') ? output : output + '/';
-            if (output.startsWith('..')) {
-                throw new Error('An asset cannot be written to a location outside of the output path.');
-            }
-            return {
-                context: input,
-                // Now we remove starting slash to make Webpack place it from the output root.
-                to: output.replace(/^\//, ''),
-                from: glob,
-                noErrorOnMissing: true,
-                force: true,
-                globOptions: {
-                    dot: true,
-                    followSymbolicLinks: !!asset.followSymlinks,
-                    ignore: [
-                        '.gitkeep',
-                        '**/.DS_Store',
-                        '**/Thumbs.db',
-                        // Negate patterns needs to be absolute because copy-webpack-plugin uses absolute globs which
-                        // causes negate patterns not to match.
-                        // See: https://github.com/webpack-contrib/copy-webpack-plugin/issues/498#issuecomment-639327909
-                        ...ignore,
-                    ].map((i) => path.posix.join(input, i)),
-                },
-                priority: index,
-            };
-        });
         extraPlugins.push(new copy_webpack_plugin_1.default({
-            patterns: copyWebpackPluginPatterns,
+            patterns: (0, helpers_1.assetPatterns)(root, buildOptions.assets),
         }));
     }
     if (buildOptions.showCircularDependencies) {
@@ -212,26 +142,33 @@ async function getCommonConfig(wco) {
             skipChildCompilers: true,
         }));
     }
+    if (scriptsSourceMap || stylesSourceMap) {
+        const include = [];
+        if (scriptsSourceMap) {
+            include.push(/js$/);
+        }
+        if (stylesSourceMap) {
+            include.push(/css$/);
+        }
+        extraPlugins.push(new webpack_2.SourceMapDevToolPlugin({
+            filename: '[file].map',
+            include,
+            // We want to set sourceRoot to  `webpack:///` for non
+            // inline sourcemaps as otherwise paths to sourcemaps will be broken in browser
+            // `webpack:///` is needed for Visual Studio breakpoints to work properly as currently
+            // there is no way to set the 'webRoot'
+            sourceRoot: 'webpack:///',
+            moduleFilenameTemplate: '[resource-path]',
+            append: hiddenSourceMap ? false : undefined,
+        }));
+    }
     if (buildOptions.statsJson) {
-        extraPlugins.push(new (class {
-            apply(compiler) {
-                compiler.hooks.done.tapPromise('angular-cli-stats', async (stats) => {
-                    const { stringifyStream } = await Promise.resolve().then(() => __importStar(require('@discoveryjs/json-ext')));
-                    const data = stats.toJson('verbose');
-                    const statsOutputPath = path.resolve(root, buildOptions.outputPath, 'stats.json');
-                    try {
-                        await fs_1.promises.mkdir(path.dirname(statsOutputPath), { recursive: true });
-                        await new Promise((resolve, reject) => stringifyStream(data)
-                            .pipe((0, fs_1.createWriteStream)(statsOutputPath))
-                            .on('close', resolve)
-                            .on('error', reject));
-                    }
-                    catch (error) {
-                        (0, webpack_diagnostics_1.addError)(stats.compilation, `Unable to write stats file: ${error.message || 'unknown error'}`);
-                    }
-                });
-            }
-        })());
+        extraPlugins.push(new plugins_1.JsonStatsPlugin(path.resolve(root, buildOptions.outputPath, 'stats.json')));
+    }
+    if (subresourceIntegrity) {
+        extraPlugins.push(new webpack_subresource_integrity_1.SubresourceIntegrityPlugin({
+            hashFuncNames: ['sha384'],
+        }));
     }
     if (scriptsSourceMap || stylesSourceMap) {
         extraRules.push({
@@ -251,22 +188,43 @@ async function getCommonConfig(wco) {
             },
         });
     }
+    if (main || polyfills) {
+        extraRules.push({
+            test: /\.[cm]?[tj]sx?$/,
+            loader: webpack_1.AngularWebpackLoaderPath,
+        });
+        extraPlugins.push((0, typescript_2.createIvyPlugin)(wco, aot, tsConfigPath));
+    }
+    if (webWorkerTsConfig) {
+        extraPlugins.push((0, typescript_2.createIvyPlugin)(wco, false, path.resolve(wco.root, webWorkerTsConfig)));
+    }
     const extraMinimizers = [];
     if (scriptsOptimization) {
-        extraMinimizers.push(new javascript_optimizer_plugin_1.JavaScriptOptimizerPlugin({
+        extraMinimizers.push(new plugins_1.JavaScriptOptimizerPlugin({
             define: buildOptions.aot ? GLOBAL_DEFS_FOR_TERSER_WITH_AOT : GLOBAL_DEFS_FOR_TERSER,
             sourcemap: scriptsSourceMap,
             target: wco.scriptTarget,
-            keepNames: !environment_options_1.allowMangle || platform === 'server',
+            keepNames: !environment_options_1.allowMangle || isPlatformServer,
             removeLicenses: buildOptions.extractLicenses,
             advanced: buildOptions.buildOptimizer,
         }));
     }
+    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';
+    }
+    else if (crossOrigin !== 'none') {
+        crossOriginLoading = crossOrigin;
+    }
     return {
         mode: scriptsOptimization || stylesOptimization.minify ? 'production' : 'development',
         devtool: false,
         target: [
-            platform === 'server' ? 'node' : 'web',
+            isPlatformServer ? 'node' : 'web',
             tsConfig.options.target === typescript_1.ScriptTarget.ES5 ? 'es5' : 'es2015',
         ],
         profile: buildOptions.statsJson,
@@ -275,12 +233,17 @@ async function getCommonConfig(wco) {
             extensions: ['.ts', '.tsx', '.mjs', '.js'],
             symlinks: !buildOptions.preserveSymlinks,
             modules: [tsConfig.options.baseUrl || projectRoot, 'node_modules'],
+            mainFields: isPlatformServer
+                ? ['es2015', 'module', 'main']
+                : ['es2020', 'es2015', 'browser', 'module', 'main'],
+            conditionNames: isPlatformServer ? ['es2015', '...'] : ['es2020', 'es2015', '...'],
         },
         resolveLoader: {
             symlinks: !buildOptions.preserveSymlinks,
         },
         context: root,
         entry: entryPoints,
+        externals,
         output: {
             uniqueName: projectName,
             hashFunction: 'xxhash64',
@@ -289,9 +252,16 @@ async function getCommonConfig(wco) {
             publicPath: (_b = buildOptions.deployUrl) !== null && _b !== void 0 ? _b : '',
             filename: `[name]${hashFormat.chunk}.js`,
             chunkFilename: `[name]${hashFormat.chunk}.js`,
+            libraryTarget: isPlatformServer ? 'commonjs' : undefined,
+            crossOriginLoading,
+            trustedTypes: 'angular#bundler',
+            scriptType: 'module',
         },
         watch: buildOptions.watch,
-        watchOptions: (0, helpers_1.getWatchOptions)(buildOptions.poll),
+        watchOptions: {
+            poll,
+            ignored: poll === undefined ? undefined : 'node_modules/**',
+        },
         performance: {
             hints: false,
         },
@@ -304,6 +274,14 @@ async function getCommonConfig(wco) {
         module: {
             // Show an error for missing exports instead of a warning.
             strictExportPresence: true,
+            parser: webWorkerTsConfig === undefined
+                ? {
+                    javascript: {
+                        worker: false,
+                        url: false,
+                    },
+                }
+                : undefined,
             rules: [
                 {
                     // Mark files inside `rxjs/add` as containing side effects.
@@ -343,50 +321,43 @@ async function getCommonConfig(wco) {
             asyncWebAssembly: true,
         },
         infrastructureLogging: {
-            level: buildOptions.verbose ? 'verbose' : 'error',
+            level: verbose ? 'verbose' : 'error',
         },
-        cache: getCacheSettings(wco, buildBrowserFeatures.supportedBrowsers, NG_VERSION.full),
+        stats: (0, helpers_1.getStatsOptions)(verbose),
+        cache: (0, helpers_1.getCacheSettings)(wco, buildBrowserFeatures.supportedBrowsers, NG_VERSION.full),
         optimization: {
             minimizer: extraMinimizers,
             moduleIds: 'deterministic',
             chunkIds: buildOptions.namedChunks ? 'named' : 'deterministic',
             emitOnErrors: false,
+            runtimeChunk: isPlatformServer ? false : 'single',
+            splitChunks: {
+                maxAsyncRequests: Infinity,
+                cacheGroups: {
+                    default: !!commonChunk && {
+                        chunks: 'async',
+                        minChunks: 2,
+                        priority: 10,
+                    },
+                    common: !!commonChunk && {
+                        name: 'common',
+                        chunks: 'async',
+                        minChunks: 2,
+                        enforce: true,
+                        priority: 5,
+                    },
+                    vendors: false,
+                    defaultVendors: !!vendorChunk && {
+                        name: 'vendor',
+                        chunks: (chunk) => chunk.name === 'main',
+                        enforce: true,
+                        test: /[\\/]node_modules[\\/]/,
+                    },
+                },
+            },
         },
-        plugins: [new plugins_1.DedupeModuleResolvePlugin({ verbose: buildOptions.verbose }), ...extraPlugins],
+        plugins: [new plugins_1.DedupeModuleResolvePlugin({ verbose }), ...extraPlugins],
+        node: false,
     };
 }
 exports.getCommonConfig = getCommonConfig;
-function getCacheSettings(wco, supportedBrowsers, angularVersion) {
-    const { enabled, path: cacheDirectory } = wco.buildOptions.cache;
-    if (enabled) {
-        const packageVersion = require('../../../package.json').version;
-        return {
-            type: 'filesystem',
-            cacheDirectory: path.join(cacheDirectory, 'angular-webpack'),
-            maxMemoryGenerations: 1,
-            // We use the versions and build options as the cache name. The Webpack configurations are too
-            // dynamic and shared among different build types: test, build and serve.
-            // None of which are "named".
-            name: (0, crypto_1.createHash)('sha1')
-                .update(angularVersion)
-                .update(packageVersion)
-                .update(wco.projectRoot)
-                .update(JSON.stringify(wco.tsConfig))
-                .update(JSON.stringify({
-                ...wco.buildOptions,
-                // Needed because outputPath changes on every build when using i18n extraction
-                // https://github.com/angular/angular-cli/blob/736a5f89deaca85f487b78aec9ff66d4118ceb6a/packages/angular_devkit/build_angular/src/utils/i18n-options.ts#L264-L265
-                outputPath: undefined,
-            }))
-                .update(supportedBrowsers.join(''))
-                .digest('hex'),
-        };
-    }
-    if (wco.buildOptions.watch) {
-        return {
-            type: 'memory',
-            maxGenerations: 1,
-        };
-    }
-    return false;
-}

package/src/webpack/configs/dev-server.d.ts

@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { logging } from '@angular-devkit/core';
-import * as webpack from 'webpack';
+import { Configuration } from 'webpack';
 import { WebpackConfigOptions, WebpackDevServerOptions } from '../../utils/build-options';
-export declare function getDevServerConfig(wco: WebpackConfigOptions<WebpackDevServerOptions>): Promise<webpack.Configuration>;
+export declare function getDevServerConfig(wco: WebpackConfigOptions<WebpackDevServerOptions>): Promise<Configuration>;
 /**
  * Resolve and build a URL _path_ that will be the root of the server. This resolved base href and
  * deploy URL from the browser options and returns a path from the root.