@angular-devkit/build-angular 12.2.0-next.0 → 12.2.0

package/src/webpack/configs/browser.js

@@ -8,7 +8,6 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getBrowserConfig = void 0;
-const typescript_1 = require("typescript");
 const utils_1 = require("../../utils");
 const plugins_1 = require("../plugins");
 const helpers_1 = require("../utils/helpers");
@@ -23,18 +22,6 @@ function getBrowserConfig(wco) {
             hashFuncNames: ['sha384'],
         }));
     }
-    if (extractLicenses) {
-        const LicenseWebpackPlugin = require('license-webpack-plugin').LicenseWebpackPlugin;
-        extraPlugins.push(new LicenseWebpackPlugin({
-            stats: {
-                warnings: false,
-                errors: false,
-            },
-            perChunkOutput: false,
-            outputFilename: '3rdpartylicenses.txt',
-            skipChildCompilers: true,
-        }));
-    }
     if (scriptsSourceMap || stylesSourceMap) {
         extraPlugins.push(helpers_1.getSourceMapDevTool(scriptsSourceMap, stylesSourceMap, buildOptions.differentialLoadingNeeded && !buildOptions.watch ? true : hiddenSourceMap, false));
     }
@@ -51,9 +38,6 @@ function getBrowserConfig(wco) {
         resolve: {
             mainFields: ['es2015', 'browser', 'module', 'main'],
         },
-        target: wco.tsConfig.options.target === typescript_1.ScriptTarget.ES5 || buildBrowserFeatures.isEs5SupportNeeded()
-            ? ['web', 'es5']
-            : 'web',
         output: {
             crossOriginLoading,
             trustedTypes: 'angular#bundler',

package/src/webpack/configs/common.js

@@ -45,6 +45,7 @@ const find_up_1 = require("../../utils/find-up");
 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 helpers_1 = require("../utils/helpers");
 // eslint-disable-next-line max-lines-per-function
 function getCommonConfig(wco) {
@@ -170,7 +171,7 @@ function getCommonConfig(wco) {
     }
     // process asset entries
     if (buildOptions.assets.length) {
-        const copyWebpackPluginPatterns = buildOptions.assets.map((asset) => {
+        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;
@@ -200,6 +201,7 @@ function getCommonConfig(wco) {
                         ...ignore,
                     ].map((i) => path.posix.join(input, i)),
                 },
+                priority: index,
             };
         });
         extraPlugins.push(new copy_webpack_plugin_1.default({
@@ -212,6 +214,18 @@ function getCommonConfig(wco) {
             exclude: /[\\\/]node_modules[\\\/]/,
         }));
     }
+    if (buildOptions.extractLicenses) {
+        const LicenseWebpackPlugin = require('license-webpack-plugin').LicenseWebpackPlugin;
+        extraPlugins.push(new LicenseWebpackPlugin({
+            stats: {
+                warnings: false,
+                errors: false,
+            },
+            perChunkOutput: false,
+            outputFilename: '3rdpartylicenses.txt',
+            skipChildCompilers: true,
+        }));
+    }
     if (buildOptions.statsJson) {
         extraPlugins.push(new (class {
             apply(compiler) {
@@ -253,83 +267,53 @@ function getCommonConfig(wco) {
     }
     const extraMinimizers = [];
     if (scriptsOptimization) {
-        const TerserPlugin = require('terser-webpack-plugin');
-        const angularGlobalDefinitions = buildOptions.aot
-            ? compiler_cli_1.GLOBAL_DEFS_FOR_TERSER_WITH_AOT
-            : compiler_cli_1.GLOBAL_DEFS_FOR_TERSER;
-        // TODO: Investigate why this fails for some packages: wco.supportES2015 ? 6 : 5;
-        const terserEcma = 5;
-        const terserOptions = {
-            warnings: !!buildOptions.verbose,
-            safari10: true,
-            output: {
-                ecma: terserEcma,
-                // For differential loading, this is handled in the bundle processing.
-                ascii_only: !differentialLoadingMode,
-                // Default behavior (undefined value) is to keep only important comments (licenses, etc.)
-                comments: !buildOptions.extractLicenses && undefined,
-                webkit: true,
-                beautify: environment_options_1.shouldBeautify,
-                wrap_func_args: false,
-            },
-            // On server, we don't want to compress anything. We still set the ngDevMode = false for it
-            // to remove dev code, and ngI18nClosureMode to remove Closure compiler i18n code
-            compress: environment_options_1.allowMinify &&
-                (platform === 'server'
-                    ? {
-                        ecma: terserEcma,
-                        global_defs: angularGlobalDefinitions,
-                        keep_fnames: true,
-                    }
-                    : {
-                        ecma: terserEcma,
-                        pure_getters: buildOptions.buildOptimizer,
-                        // PURE comments work best with 3 passes.
-                        // See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
-                        passes: buildOptions.buildOptimizer ? 3 : 1,
-                        global_defs: angularGlobalDefinitions,
-                        pure_funcs: ['forwardRef'],
-                    }),
-            // We also want to avoid mangling on server.
-            // Name mangling is handled within the browser builder
-            mangle: environment_options_1.allowMangle && platform !== 'server' && !differentialLoadingMode,
-        };
         const globalScriptsNames = globalScriptsByBundleName.map((s) => s.bundleName);
-        extraMinimizers.push(new TerserPlugin({
-            parallel: environment_options_1.maxWorkers,
-            extractComments: false,
-            exclude: globalScriptsNames,
-            terserOptions,
-        }), 
-        // Script bundles are fully optimized here in one step since they are never downleveled.
-        // They are shared between ES2015 & ES5 outputs so must support ES5.
-        new TerserPlugin({
-            parallel: environment_options_1.maxWorkers,
-            extractComments: false,
-            include: globalScriptsNames,
-            terserOptions: {
-                ...terserOptions,
-                compress: environment_options_1.allowMinify && {
-                    ...terserOptions.compress,
+        if (globalScriptsNames.length > 0) {
+            // Script bundles are fully optimized here in one step since they are never downleveled.
+            // They are shared between ES2015 & ES5 outputs so must support ES5.
+            // The `terser-webpack-plugin` will add the minified flag to the asset which will prevent
+            // additional optimizations by the next plugin.
+            const TerserPlugin = require('terser-webpack-plugin');
+            extraMinimizers.push(new TerserPlugin({
+                parallel: environment_options_1.maxWorkers,
+                extractComments: false,
+                include: globalScriptsNames,
+                terserOptions: {
                     ecma: 5,
+                    compress: environment_options_1.allowMinify,
+                    output: {
+                        ascii_only: true,
+                        wrap_func_args: false,
+                    },
+                    mangle: environment_options_1.allowMangle && platform !== 'server',
                 },
-                output: {
-                    ...terserOptions.output,
-                    ecma: 5,
-                },
-                mangle: environment_options_1.allowMangle && platform !== 'server',
-            },
+            }));
+        }
+        extraMinimizers.push(new javascript_optimizer_plugin_1.JavaScriptOptimizerPlugin({
+            define: buildOptions.aot ? compiler_cli_1.GLOBAL_DEFS_FOR_TERSER_WITH_AOT : compiler_cli_1.GLOBAL_DEFS_FOR_TERSER,
+            sourcemap: scriptsSourceMap,
+            target: wco.scriptTarget,
+            keepNames: !environment_options_1.allowMangle || platform === 'server',
+            removeLicenses: buildOptions.extractLicenses,
+            advanced: buildOptions.buildOptimizer,
         }));
     }
     return {
         mode: scriptsOptimization || stylesOptimization.minify ? 'production' : 'development',
         devtool: false,
+        target: [
+            platform === 'server' ? 'node' : 'web',
+            tsConfig.options.target === typescript_1.ScriptTarget.ES5 ||
+                (platform !== 'server' && buildBrowserFeatures.isEs5SupportNeeded())
+                ? 'es5'
+                : 'es2015',
+        ],
         profile: buildOptions.statsJson,
         resolve: {
             roots: [projectRoot],
             extensions: ['.ts', '.tsx', '.mjs', '.js'],
             symlinks: !buildOptions.preserveSymlinks,
-            modules: [wco.tsConfig.options.baseUrl || projectRoot, 'node_modules'],
+            modules: [tsConfig.options.baseUrl || projectRoot, 'node_modules'],
         },
         resolveLoader: {
             symlinks: !buildOptions.preserveSymlinks,
@@ -445,9 +429,14 @@ function getCacheSettings(wco, supportedBrowsers) {
                 .update(packageVersion)
                 .update(wco.projectRoot)
                 .update(JSON.stringify(wco.tsConfig))
-                .update(JSON.stringify(wco.buildOptions))
+                .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('base64'),
+                .digest('hex'),
         };
     }
     if (wco.buildOptions.watch && !environment_options_1.cachingDisabled) {

package/src/webpack/configs/server.js

@@ -30,7 +30,6 @@ function getServerConfig(wco) {
         resolve: {
             mainFields: ['es2015', 'main', 'module'],
         },
-        target: 'node',
         output: {
             libraryTarget: 'commonjs',
         },

package/src/webpack/configs/styles.js

@@ -207,12 +207,13 @@ function getStylesConfig(wco) {
             extraPlugins.push(new plugins_1.SuppressExtractedTextChunksWebpackPlugin());
         }
     }
+    const postCss = require('postcss');
+    const postCssLoaderPath = require.resolve('postcss-loader');
     const componentStyleLoaders = [
-        { loader: require.resolve('raw-loader') },
         {
-            loader: require.resolve('postcss-loader'),
+            loader: postCssLoaderPath,
             options: {
-                implementation: require('postcss'),
+                implementation: postCss,
                 postcssOptions: postcssOptionsCreator(componentsSourceMap, false),
             },
         },
@@ -231,23 +232,77 @@ function getStylesConfig(wco) {
             },
         },
         {
-            loader: require.resolve('postcss-loader'),
+            loader: postCssLoaderPath,
             options: {
-                implementation: require('postcss'),
+                implementation: postCss,
                 postcssOptions: postcssOptionsCreator(false, buildOptions.extractCss),
                 sourceMap: !!cssSourceMap,
             },
         },
     ];
+    const extraMinimizers = [];
+    if (buildOptions.optimization.styles.minify) {
+        const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+        const esbuild = require('esbuild');
+        const cssnanoOptions = {
+            preset: [
+                'default',
+                {
+                    // Disable SVG optimizations, as this can cause optimizations which are not compatible in all browsers.
+                    svgo: false,
+                    // Disable `calc` optimizations, due to several issues. #16910, #16875, #17890
+                    calc: false,
+                    // Disable CSS rules sorted due to several issues #20693, https://github.com/ionic-team/ionic-framework/issues/23266 and https://github.com/cssnano/cssnano/issues/1054
+                    cssDeclarationSorter: false,
+                    // Workaround for Critters as it doesn't work when `@media all {}` is minified to `@media {}`.
+                    // TODO: Remove once they move to postcss.
+                    minifyParams: !buildOptions.optimization.styles.inlineCritical,
+                },
+            ],
+        };
+        const globalBundlesRegExp = new RegExp(`^(${Object.keys(entryPoints).join('|')})(\.[0-9a-f]{20})?.css$`);
+        extraMinimizers.push(
+        // Component styles use esbuild which is faster and generates smaller files on average.
+        // esbuild does not yet support style sourcemaps but component style sourcemaps are not
+        // supported by the CLI when style minify is enabled.
+        new CssMinimizerPlugin({
+            // Component styles retain their original file name
+            test: /\.(?:css|scss|sass|less|styl)$/,
+            exclude: globalBundlesRegExp,
+            parallel: false,
+            minify: async (data) => {
+                const [[sourcefile, input]] = Object.entries(data);
+                const { code, warnings } = await esbuild.transform(input, {
+                    loader: 'css',
+                    minify: true,
+                    sourcefile,
+                });
+                return {
+                    code,
+                    warnings: warnings.length > 0
+                        ? await esbuild.formatMessages(warnings, { kind: 'warning' })
+                        : [],
+                };
+            },
+        }), 
+        // Global styles use cssnano since sourcemap support is required even when minify
+        // is enabled. Once esbuild supports style sourcemaps this can be changed.
+        // esbuild stylesheet source map support issue: https://github.com/evanw/esbuild/issues/519
+        new CssMinimizerPlugin({
+            test: /\.css$/,
+            include: globalBundlesRegExp,
+            parallel: environment_options_1.maxWorkers,
+            minify: [CssMinimizerPlugin.cssnanoMinify],
+            minimizerOptions: cssnanoOptions,
+        }));
+    }
     const styleLanguages = [
         {
             extensions: ['css'],
-            mimetype: 'text/css',
             use: [],
         },
         {
             extensions: ['scss'],
-            mimetype: 'text/x-scss',
             use: [
                 {
                     loader: require.resolve('resolve-url-loader'),
@@ -270,6 +325,9 @@ function getStylesConfig(wco) {
                             // 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,
                         },
                     },
                 },
@@ -277,7 +335,6 @@ function getStylesConfig(wco) {
         },
         {
             extensions: ['sass'],
-            mimetype: 'text/x-sass',
             use: [
                 {
                     loader: require.resolve('resolve-url-loader'),
@@ -291,6 +348,8 @@ function getStylesConfig(wco) {
                         implementation: sassImplementation,
                         sourceMap: true,
                         sassOptions: {
+                            // 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,
@@ -299,6 +358,9 @@ function getStylesConfig(wco) {
                             // 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,
                         },
                     },
                 },
@@ -306,7 +368,6 @@ function getStylesConfig(wco) {
         },
         {
             extensions: ['less'],
-            mimetype: 'text/x-less',
             use: [
                 {
                     loader: require.resolve('less-loader'),
@@ -323,7 +384,6 @@ function getStylesConfig(wco) {
         },
         {
             extensions: ['styl'],
-            mimetype: 'text/x-stylus',
             use: [
                 {
                     loader: require.resolve('stylus-loader'),
@@ -339,74 +399,31 @@ function getStylesConfig(wco) {
             ],
         },
     ];
-    const inlineLanguageRules = [];
-    const fileLanguageRules = [];
-    for (const language of styleLanguages) {
-        if (language.mimetype) {
-            // inline component styles use data URIs and processing is selected by mimetype
-            inlineLanguageRules.push({
-                mimetype: language.mimetype,
-                use: [...componentStyleLoaders, ...language.use],
-            });
-        }
-        fileLanguageRules.push({
-            test: new RegExp(`\\.(?:${language.extensions.join('|')})$`, 'i'),
-            rules: [
-                // Setup processing rules for global and component styles
-                {
-                    oneOf: [
-                        // Component styles are all styles except defined global styles
-                        {
-                            exclude: globalStylePaths,
-                            use: componentStyleLoaders,
-                        },
-                        // Global styles are only defined global styles
-                        {
-                            include: globalStylePaths,
-                            use: globalStyleLoaders,
-                        },
-                    ],
-                },
-                { use: language.use },
-            ],
-        });
-    }
-    const extraMinimizers = [];
-    if (buildOptions.optimization.styles.minify) {
-        const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-        const minimizerOptions = {
-            preset: [
-                'default',
-                {
-                    // Disable SVG optimizations, as this can cause optimizations which are not compatible in all browsers.
-                    svgo: false,
-                    // Disable `calc` optimizations, due to several issues. #16910, #16875, #17890
-                    calc: false,
-                    // Disable CSS rules sorted due to several issues #20693, https://github.com/ionic-team/ionic-framework/issues/23266 and https://github.com/cssnano/cssnano/issues/1054
-                    cssDeclarationSorter: false,
-                },
-            ],
-        };
-        const globalBundlesRegExp = new RegExp(`^(${Object.keys(entryPoints).join('|')})(\.[0-9a-f]{20})?.css$`);
-        extraMinimizers.push(new CssMinimizerPlugin({
-            // Component styles retain their original file name
-            test: /\.(?:css|scss|sass|less|styl)$/,
-            parallel: false,
-            exclude: globalBundlesRegExp,
-            minify: [CssMinimizerPlugin.cssnanoMinify],
-            minimizerOptions,
-        }), new CssMinimizerPlugin({
-            test: /\.css$/,
-            include: globalBundlesRegExp,
-            parallel: environment_options_1.maxWorkers,
-            minify: [CssMinimizerPlugin.cssnanoMinify],
-            minimizerOptions,
-        }));
-    }
     return {
         entry: entryPoints,
         module: {
-            rules: [...fileLanguageRules, ...inlineLanguageRules],
+            rules: styleLanguages.map(({ extensions, use }) => ({
+                test: new RegExp(`\\.(?:${extensions.join('|')})$`, 'i'),
+                rules: [
+                    // Setup processing rules for global and component styles
+                    {
+                        oneOf: [
+                            // Component styles are all styles except defined global styles
+                            {
+                                exclude: globalStylePaths,
+                                use: componentStyleLoaders,
+                                type: 'asset/source',
+                            },
+                            // Global styles are only defined global styles
+                            {
+                                include: globalStylePaths,
+                                use: globalStyleLoaders,
+                            },
+                        ],
+                    },
+                    { use },
+                ],
+            })),
         },
         optimization: {
             minimizer: extraMinimizers,

package/src/webpack/plugins/builder-watch-plugin.d.ts

@@ -16,33 +16,8 @@ export interface BuilderWatcherFactory {
         close(): void;
     };
 }
-export interface WebpackWatcher {
-    close(): void;
-    pause(): void;
-    getFileTimeInfoEntries(): Map<string, {
-        safeTime: number;
-        timestamp: number;
-    }>;
-    getContextTimeInfoEntries(): Map<string, {
-        safeTime: number;
-        timestamp: number;
-    }>;
-}
-declare type WatchCallback = (error: Error | undefined, files: Map<string, {
-    safeTime: number;
-    timestamp: number;
-}>, contexts: Map<string, {
-    safeTime: number;
-    timestamp: number;
-}>, changes: Set<string>, removals: Set<string>) => void;
-export interface WebpackWatchFileSystem {
-    watch(files: Iterable<string>, directories: Iterable<string>, missing: Iterable<string>, startTime: number, options: {}, callback: WatchCallback, callbackUndelayed: (file: string, time: number) => void): WebpackWatcher;
-}
 export declare class BuilderWatchPlugin {
     private readonly watcherFactory;
     constructor(watcherFactory: BuilderWatcherFactory);
-    apply(compiler: Compiler & {
-        watchFileSystem: unknown;
-    }): void;
+    apply(compiler: Compiler): void;
 }
-export {};

package/src/webpack/plugins/hmr/hmr-accept.js

@@ -7,6 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+// eslint-disable-next-line import/no-extraneous-dependencies
 const core_1 = require("@angular/core");
 const operators_1 = require("rxjs/operators");
 function default_1(mod) {

package/src/webpack/plugins/javascript-optimizer-plugin.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @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 { ScriptTarget } from 'typescript';
+import type { Compiler } from 'webpack';
+/**
+ * The options used to configure the {@link JavaScriptOptimizerPlugin}.
+ */
+export interface JavaScriptOptimizerOptions {
+    /**
+     * Enables advanced optimizations in the underlying JavaScript optimizers.
+     * This currently increases the `terser` passes to 3 and enables the `pure_getters`
+     * option for `terser`.
+     */
+    advanced: boolean;
+    /**
+     * An object record of string keys that will be replaced with their respective values when found
+     * within the code during optimization.
+     */
+    define: Record<string, string | number | boolean>;
+    /**
+     * Enables the generation of a sourcemap during optimization.
+     * The output sourcemap will be a full sourcemap containing the merge of the input sourcemap and
+     * all intermediate sourcemaps.
+     */
+    sourcemap: boolean;
+    /**
+     * The ECMAScript version that should be used when generating output code.
+     * The optimizer will not adjust the output code with features present in newer
+     * ECMAScript versions.
+     */
+    target: ScriptTarget;
+    /**
+     * Enables the retention of identifier names and ensures that function and class names are
+     * present in the output code.
+     */
+    keepNames: boolean;
+    /**
+     * Enables the removal of all license comments from the output code.
+     */
+    removeLicenses: boolean;
+}
+/**
+ * A Webpack plugin that provides JavaScript optimization capabilities.
+ *
+ * The plugin uses both `esbuild` and `terser` to provide both fast and highly-optimized
+ * code output. `esbuild` is used as an initial pass to remove the majority of unused code
+ * as well as shorten identifiers. `terser` is then used as a secondary pass to apply
+ * optimizations not yet implemented by `esbuild`.
+ */
+export declare class JavaScriptOptimizerPlugin {
+    options: Partial<JavaScriptOptimizerOptions>;
+    constructor(options?: Partial<JavaScriptOptimizerOptions>);
+    apply(compiler: Compiler): void;
+}