@angular-devkit/build-angular 12.0.2 → 12.0.3

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "12.0.2",
+  "version": "12.0.3",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.1200.2",
-    "@angular-devkit/build-optimizer": "0.1200.2",
-    "@angular-devkit/build-webpack": "0.1200.2",
-    "@angular-devkit/core": "12.0.2",
+    "@angular-devkit/architect": "0.1200.3",
+    "@angular-devkit/build-optimizer": "0.1200.3",
+    "@angular-devkit/build-webpack": "0.1200.3",
+    "@angular-devkit/core": "12.0.3",
     "@babel/core": "7.14.3",
     "@babel/generator": "7.14.3",
     "@babel/plugin-transform-async-to-generator": "7.13.0",
@@ -19,7 +19,7 @@
     "@babel/template": "7.12.13",
     "@discoveryjs/json-ext": "0.5.2",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "12.0.2",
+    "@ngtools/webpack": "12.0.3",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",
@@ -39,7 +39,7 @@
     "karma-source-map-support": "1.4.0",
     "less": "4.1.1",
     "less-loader": "8.1.1",
-    "license-webpack-plugin": "2.3.17",
+    "license-webpack-plugin": "2.3.19",
     "loader-utils": "2.0.0",
     "mini-css-extract-plugin": "1.5.1",
     "minimatch": "3.0.4",
@@ -68,7 +68,7 @@
     "terser-webpack-plugin": "5.1.2",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
-    "webpack": "5.36.2",
+    "webpack": "5.38.1",
     "webpack-dev-middleware": "4.1.0",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "5.7.3",
@@ -120,7 +120,7 @@
     "url": "https://github.com/angular/angular-cli.git"
   },
   "engines": {
-    "node": "^12.14.1 || ^14.0.0",
+    "node": "^12.14.1 || >=14.0.0",
     "npm": "^6.11.0 || ^7.5.6",
     "yarn": ">= 1.13.0"
   },

package/src/browser/schema.d.ts

@@ -407,7 +407,7 @@ export interface SourceMapClass {
  */
 export interface StylePreprocessorOptions {
     /**
-     * Paths to include. Paths will be resolved to project root.
+     * Paths to include. Paths will be resolved to workspace root.
      */
     includePaths?: string[];
 }

package/src/browser/schema.json

@@ -51,7 +51,7 @@
       "type": "object",
       "properties": {
         "includePaths": {
-          "description": "Paths to include. Paths will be resolved to project root.",
+          "description": "Paths to include. Paths will be resolved to workspace root.",
           "type": "array",
           "items": {
             "type": "string"

package/src/dev-server/index.js

@@ -84,11 +84,47 @@ function serveWebpackBrowser(options, context, transforms = {}) {
             overrides.outputHashing = schema_1.OutputHashing.None;
             logger.warn(`Warning: 'outputHashing' option is disabled when using the dev-server.`);
         }
+        if (options.hmr) {
+            logger.warn(core_1.tags.stripIndents `NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
+      See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.`);
+        }
+        if (!options.disableHostCheck &&
+            options.host &&
+            !/^127\.\d+\.\d+\.\d+/g.test(options.host) &&
+            options.host !== 'localhost') {
+            logger.warn(core_1.tags.stripIndent `
+        Warning: This is a simple server for use in testing or debugging Angular applications
+        locally. It hasn't been reviewed for security issues.
+
+        Binding this server to an open connection can result in compromising your application or
+        computer. Using a different host than the one passed to the "--host" flag might result in
+        websocket connection issues. You might need to use "--disableHostCheck" if that's the
+        case.
+      `);
+        }
+        if (options.disableHostCheck) {
+            logger.warn(core_1.tags.oneLine `
+        Warning: Running a server with --disable-host-check is a security risk.
+        See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
+        for more information.
+      `);
+        }
         // Webpack's live reload functionality adds the `strip-ansi` package which is commonJS
         (_b = rawBrowserOptions.allowedCommonJsDependencies) !== null && _b !== void 0 ? _b : (rawBrowserOptions.allowedCommonJsDependencies = []);
         rawBrowserOptions.allowedCommonJsDependencies.push('strip-ansi');
         const browserName = await context.getBuilderNameForTarget(browserTarget);
         const browserOptions = (await context.validateOptions({ ...rawBrowserOptions, ...overrides }, browserName));
+        const { styles, scripts } = utils_1.normalizeOptimization(browserOptions.optimization);
+        if (scripts || styles.minify) {
+            logger.error(core_1.tags.stripIndents `
+        ****************************************************************************************
+        This is a simple server for use in testing or debugging Angular applications locally.
+        It hasn't been reviewed for security issues.
+
+        DON'T USE IT FOR PRODUCTION!
+        ****************************************************************************************
+      `);
+        }
         const { config, projectRoot, i18n } = await webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext(browserOptions, context, (wco) => [
             configs_1.getDevServerConfig(wco),
             configs_1.getCommonConfig(wco),
@@ -129,31 +165,6 @@ function serveWebpackBrowser(options, context, transforms = {}) {
                 }
             }
         }
-        if (options.hmr) {
-            logger.warn(core_1.tags.stripIndents `NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
-      See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.`);
-        }
-        if (!options.disableHostCheck &&
-            options.host &&
-            !/^127\.\d+\.\d+\.\d+/g.test(options.host) &&
-            options.host !== 'localhost') {
-            logger.warn(core_1.tags.stripIndent `
-        Warning: This is a simple server for use in testing or debugging Angular applications
-        locally. It hasn't been reviewed for security issues.
-
-        Binding this server to an open connection can result in compromising your application or
-        computer. Using a different host than the one passed to the "--host" flag might result in
-        websocket connection issues. You might need to use "--disableHostCheck" if that's the
-        case.
-      `);
-        }
-        if (options.disableHostCheck) {
-            logger.warn(core_1.tags.oneLine `
-        Warning: Running a server with --disable-host-check is a security risk.
-        See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
-        for more information.
-      `);
-        }
         let locale;
         if (i18n.shouldInline) {
             // Dev-server only supports one locale
@@ -186,7 +197,6 @@ function serveWebpackBrowser(options, context, transforms = {}) {
         };
     }
     return rxjs_1.from(setup()).pipe(operators_1.switchMap(({ browserOptions, webpackConfig, projectRoot, locale }) => {
-        const normalizedOptimization = utils_1.normalizeOptimization(browserOptions.optimization);
         if (browserOptions.index) {
             const { scripts = [], styles = [], baseHref, tsConfig } = browserOptions;
             const { options: compilerOptions } = read_tsconfig_1.readTsconfig(tsConfig, workspaceRoot);
@@ -207,22 +217,12 @@ function serveWebpackBrowser(options, context, transforms = {}) {
                 deployUrl: browserOptions.deployUrl,
                 sri: browserOptions.subresourceIntegrity,
                 postTransform: transforms.indexHtml,
-                optimization: normalizedOptimization,
+                optimization: utils_1.normalizeOptimization(browserOptions.optimization),
                 WOFFSupportNeeded: !buildBrowserFeatures.isFeatureSupported('woff2'),
                 crossOrigin: browserOptions.crossOrigin,
                 lang: locale,
             }));
         }
-        if (normalizedOptimization.scripts || normalizedOptimization.styles.minify) {
-            logger.error(core_1.tags.stripIndents `
-          ****************************************************************************************
-          This is a simple server for use in testing or debugging Angular applications locally.
-          It hasn't been reviewed for security issues.
-
-          DON'T USE IT FOR PRODUCTION!
-          ****************************************************************************************
-        `);
-        }
         return build_webpack_1.runWebpackDevServer(webpackConfig, context, {
             logging: transforms.logging || stats_1.createWebpackLoggingCallback(!!options.verbose, logger),
             webpackFactory: require('webpack'),

package/src/extract-i18n/index.js

@@ -171,7 +171,7 @@ async function execute(options, context, transforms) {
         partials.push({
             plugins: [
                 new webpack.NormalModuleReplacementPlugin(/\.(css|scss|sass|styl|less)$/, path.join(__dirname, 'empty-export-default.js')),
-                new webpack.NormalModuleReplacementPlugin(/^angular-resource:\/\//, path.join(__dirname, 'empty-export-default.js')),
+                new webpack.NormalModuleReplacementPlugin(/^angular-resource:style,/, path.join(__dirname, 'empty-export-default.js')),
             ],
         });
         return partials;

package/src/karma/schema.d.ts

@@ -167,7 +167,7 @@ export interface SourceMapClass {
  */
 export interface StylePreprocessorOptions {
     /**
-     * Paths to include. Paths will be resolved to project root.
+     * Paths to include. Paths will be resolved to workspace root.
      */
     includePaths?: string[];
 }

package/src/karma/schema.json

@@ -55,7 +55,7 @@
       "type": "object",
       "properties": {
         "includePaths": {
-          "description": "Paths to include. Paths will be resolved to project root.",
+          "description": "Paths to include. Paths will be resolved to workspace root.",
           "type": "array",
           "items": {
             "type": "string"

package/src/server/schema.d.ts

@@ -198,7 +198,7 @@ export interface SourceMapClass {
  */
 export interface StylePreprocessorOptions {
     /**
-     * Paths to include. Paths will be resolved to project root.
+     * Paths to include. Paths will be resolved to workspace root.
      */
     includePaths?: string[];
 }

package/src/server/schema.json

@@ -24,7 +24,7 @@
       "type": "object",
       "properties": {
         "includePaths": {
-          "description": "Paths to include. Paths will be resolved to project root.",
+          "description": "Paths to include. Paths will be resolved to workspace root.",
           "type": "array",
           "items": {
             "type": "string"

package/src/webpack/configs/common.js

@@ -35,6 +35,31 @@ function getCommonConfig(wco) {
     const hashFormat = helpers_1.getOutputHashFormat(buildOptions.outputHashing || 'none');
     const buildBrowserFeatures = new utils_1.BuildBrowserFeatures(projectRoot);
     const targetInFileName = helpers_1.getEsVersionForFileName(tsConfig.options.target, buildOptions.differentialLoadingNeeded);
+    if (buildOptions.progress) {
+        const spinner = new spinner_1.Spinner();
+        spinner.start(`Generating ${platform} application bundles (phase: setup)...`);
+        let previousPercentage;
+        extraPlugins.push(new webpack_1.ProgressPlugin({
+            handler: (percentage, message) => {
+                if (previousPercentage === 1 && percentage !== 0) {
+                    // In some scenarios in Webpack 5 percentage goes from 1 back to 0.99.
+                    // Ex: 0.99 -> 1 -> 0.99 -> 1
+                    // This causes the "complete" message to be displayed multiple times.
+                    return;
+                }
+                switch (percentage) {
+                    case 1:
+                        spinner.succeed(`${platform.replace(/^\w/, (s) => s.toUpperCase())} application bundle generation complete.`);
+                        break;
+                    case 0:
+                    default:
+                        spinner.text = `Generating ${platform} application bundles (phase: ${message})...`;
+                        break;
+                }
+                previousPercentage = percentage;
+            },
+        }));
+    }
     if (buildOptions.main) {
         const mainPath = path.resolve(root, buildOptions.main);
         entryPoints['main'] = [mainPath];
@@ -161,32 +186,6 @@ function getCommonConfig(wco) {
             patterns: copyWebpackPluginPatterns,
         }));
     }
-    if (buildOptions.progress) {
-        const spinner = new spinner_1.Spinner();
-        let previousPercentage;
-        extraPlugins.push(new webpack_1.ProgressPlugin({
-            handler: (percentage, message) => {
-                if (previousPercentage === 1 && percentage !== 0) {
-                    // In some scenarios in Webpack 5 percentage goes from 1 back to 0.99.
-                    // Ex: 0.99 -> 1 -> 0.99 -> 1
-                    // This causes the "complete" message to be displayed multiple times.
-                    return;
-                }
-                switch (percentage) {
-                    case 0:
-                        spinner.start(`Generating ${platform} application bundles...`);
-                        break;
-                    case 1:
-                        spinner.succeed(`${platform.replace(/^\w/, (s) => s.toUpperCase())} application bundle generation complete.`);
-                        break;
-                    default:
-                        spinner.text = `Generating ${platform} application bundles (phase: ${message})...`;
-                        break;
-                }
-                previousPercentage = percentage;
-            },
-        }));
-    }
     if (buildOptions.showCircularDependencies) {
         const CircularDependencyPlugin = require('circular-dependency-plugin');
         extraPlugins.push(new CircularDependencyPlugin({

package/src/webpack/configs/server.js

@@ -34,6 +34,14 @@ function getServerConfig(wco) {
         output: {
             libraryTarget: 'commonjs',
         },
+        module: {
+            parser: {
+                javascript: {
+                    worker: false,
+                    url: false,
+                },
+            },
+        },
         plugins: [
             // Fixes Critical dependency: the request of a dependency is an expression
             new webpack_1.ContextReplacementPlugin(/@?hapi(\\|\/)/),

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

@@ -13,16 +13,11 @@ export declare function getWebpackStatsConfig(verbose?: boolean): {
     timings: boolean;
     chunks: boolean;
     builtAt: boolean;
-    chunkModules: boolean;
-    children: boolean;
-    modules: boolean;
-    reasons: boolean;
     warnings: boolean;
     errors: boolean;
     assets: boolean;
-    version: boolean;
-    errorDetails: boolean;
-    moduleTrace: boolean;
+    ids: boolean;
+    entrypoints: boolean;
 };
 export declare function getStatsConfig(wco: WebpackConfigOptions): {
     stats: {
@@ -32,15 +27,10 @@ export declare function getStatsConfig(wco: WebpackConfigOptions): {
         timings: boolean;
         chunks: boolean;
         builtAt: boolean;
-        chunkModules: boolean;
-        children: boolean;
-        modules: boolean;
-        reasons: boolean;
         warnings: boolean;
         errors: boolean;
         assets: boolean;
-        version: boolean;
-        errorDetails: boolean;
-        moduleTrace: boolean;
+        ids: boolean;
+        entrypoints: boolean;
     };
 };

package/src/webpack/configs/stats.js

@@ -15,16 +15,12 @@ const webpackOutputOptions = {
     timings: true,
     chunks: true,
     builtAt: true,
-    chunkModules: false,
-    children: false,
-    modules: false,
-    reasons: false,
     warnings: true,
     errors: true,
     assets: true,
-    version: false,
-    errorDetails: false,
-    moduleTrace: false,
+    // Needed for markAsyncChunksNonInitial.
+    ids: true,
+    entrypoints: true,
 };
 const verboseWebpackOutputOptions = {
     // The verbose output will most likely be piped to a file, so colors just mess it up.
@@ -39,8 +35,8 @@ const verboseWebpackOutputOptions = {
     errorDetails: true,
     moduleTrace: true,
     logging: 'verbose',
+    modulesSpace: Infinity,
 };
-verboseWebpackOutputOptions['modulesSpace'] = Infinity;
 function getWebpackStatsConfig(verbose = false) {
     return verbose
         ? { ...webpackOutputOptions, ...verboseWebpackOutputOptions }