@angular-devkit/build-angular 0.802.0-next.1 → 0.802.2

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "0.802.0-next.1",
+  "version": "0.802.2",
   "description": "Angular Webpack Build Facade",
   "experimental": true,
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.802.0-next.1",
-    "@angular-devkit/build-optimizer": "0.802.0-next.1",
-    "@angular-devkit/build-webpack": "0.802.0-next.1",
-    "@angular-devkit/core": "8.2.0-next.1",
-    "@ngtools/webpack": "8.2.0-next.1",
+    "@angular-devkit/architect": "0.802.2",
+    "@angular-devkit/build-optimizer": "0.802.2",
+    "@angular-devkit/build-webpack": "0.802.2",
+    "@angular-devkit/core": "8.2.2",
+    "@ngtools/webpack": "8.2.2",
     "ajv": "6.10.2",
     "autoprefixer": "9.6.1",
     "browserslist": "4.6.6",
-    "caniuse-lite": "1.0.30000984",
+    "caniuse-lite": "1.0.30000986",
     "circular-dependency-plugin": "5.0.2",
     "clean-css": "4.2.1",
-    "copy-webpack-plugin": "5.0.3",
+    "copy-webpack-plugin": "5.0.4",
     "core-js": "3.1.4",
-    "file-loader": "4.0.0",
+    "file-loader": "4.1.0",
     "glob": "7.1.4",
     "istanbul-instrumenter-loader": "3.0.1",
     "karma-source-map-support": "1.4.0",
@@ -37,9 +37,9 @@
     "postcss-loader": "3.0.0",
     "raw-loader": "1.0.0",
     "rxjs": "6.4.0",
-    "sass": "1.22.5",
+    "sass": "1.22.7",
     "sass-loader": "7.1.0",
-    "semver": "6.2.0",
+    "semver": "6.3.0",
     "source-map-support": "0.5.12",
     "source-map-loader": "0.2.4",
     "speed-measure-webpack-plugin": "1.3.1",
@@ -48,7 +48,7 @@
     "stylus-loader": "3.0.2",
     "tree-kill": "1.2.1",
     "terser-webpack-plugin": "1.3.0",
-    "webpack": "4.35.3",
+    "webpack": "4.38.0",
     "webpack-dev-middleware": "3.7.0",
     "webpack-dev-server": "3.7.2",
     "webpack-merge": "4.2.1",
@@ -58,7 +58,7 @@
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^8.0.0-beta.0 || ^8.1.0-beta.0 || ^8.2.0-beta.0 || ^8.3.0-beta.0 || ^8.4.0-beta.0 || >=9.0.0-beta < 9",
-    "typescript": ">=3.1 < 3.5"
+    "typescript": ">=3.1 < 3.6"
   },
   "keywords": [
     "angular",

package/src/angular-cli-files/models/webpack-configs/common.js

@@ -224,16 +224,20 @@ function getCommonConfig(wco) {
             ngDevMode: false,
             ngI18nClosureMode: false,
         };
-        try {
-            // Try to load known global definitions from @angular/compiler-cli.
-            // tslint:disable-next-line:no-implicit-dependencies
-            const GLOBAL_DEFS_FOR_TERSER = require('@angular/compiler-cli').GLOBAL_DEFS_FOR_TERSER;
-            if (GLOBAL_DEFS_FOR_TERSER) {
-                angularGlobalDefinitions = GLOBAL_DEFS_FOR_TERSER;
-            }
+        // Try to load known global definitions from @angular/compiler-cli.
+        const GLOBAL_DEFS_FOR_TERSER = require('@angular/compiler-cli').GLOBAL_DEFS_FOR_TERSER;
+        if (GLOBAL_DEFS_FOR_TERSER) {
+            angularGlobalDefinitions = GLOBAL_DEFS_FOR_TERSER;
         }
-        catch (_b) {
-            // Do nothing, the default above will be used instead.
+        if (buildOptions.aot) {
+            // Also try to load AOT-only global definitions.
+            const GLOBAL_DEFS_FOR_TERSER_WITH_AOT = require('@angular/compiler-cli').GLOBAL_DEFS_FOR_TERSER_WITH_AOT;
+            if (GLOBAL_DEFS_FOR_TERSER_WITH_AOT) {
+                angularGlobalDefinitions = {
+                    ...angularGlobalDefinitions,
+                    ...GLOBAL_DEFS_FOR_TERSER_WITH_AOT,
+                };
+            }
         }
         const terserOptions = {
             ecma: wco.supportES2015 ? 6 : 5,
@@ -320,13 +324,21 @@ function getCommonConfig(wco) {
                     test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
                     parser: { system: true },
                 },
+                {
+                    test: /[\/\\]hot[\/\\]emitter\.js$/,
+                    parser: { node: { events: true } },
+                },
+                {
+                    test: /[\/\\]webpack-dev-server[\/\\]client[\/\\]utils[\/\\]createSocketUrl\.js$/,
+                    parser: { node: { querystring: true } },
+                },
                 {
                     test: /\.js$/,
                     ...buildOptimizerUseRule,
                 },
                 {
                     test: /\.js$/,
-                    exclude: /(ngfactory|ngstyle).js$/,
+                    exclude: /(ngfactory|ngstyle)\.js$/,
                     enforce: 'pre',
                     ...sourceMapUseRule,
                 },

package/src/angular-cli-files/models/webpack-configs/styles.js

@@ -168,7 +168,13 @@ function getStylesConfig(wco) {
                 options: {
                     ident: 'embedded',
                     plugins: postcssPluginCreator,
-                    sourceMap: cssSourceMap && !buildOptions.sourceMap.hidden ? 'inline' : false,
+                    sourceMap: cssSourceMap
+                        // Never use component css sourcemap when style optimizations are on.
+                        // It will just increase bundle size without offering good debug experience.
+                        && !buildOptions.optimization.styles
+                        // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
+                        // for component css.
+                        && !buildOptions.sourceMap.hidden ? 'inline' : false,
                 },
             },
             ...use,

package/src/angular-cli-files/models/webpack-configs/utils.js

@@ -13,7 +13,6 @@ const core_1 = require("@angular-devkit/core");
 const webpack_1 = require("webpack");
 const typescript_1 = require("typescript");
 function getOutputHashFormat(option, length = 20) {
-    /* tslint:disable:max-line-length */
     const hashFormats = {
         none: { chunk: '', extract: '', file: '', script: '' },
         media: { chunk: '', extract: '', file: `.[hash:${length}]`, script: '' },
@@ -30,7 +29,6 @@ function getOutputHashFormat(option, length = 20) {
             script: `.[hash:${length}]`,
         },
     };
-    /* tslint:enable:max-line-length */
     return hashFormats[option] || hashFormats['none'];
 }
 exports.getOutputHashFormat = getOutputHashFormat;
@@ -71,7 +69,12 @@ function getSourceMapDevTool(scriptsSourceMap, stylesSourceMap, hiddenSourceMap
     return new webpack_1.SourceMapDevToolPlugin({
         filename: inlineSourceMap ? undefined : '[file].map',
         include,
-        moduleFilenameTemplate: '[namespace]/[resource-path]',
+        // 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: inlineSourceMap ? '' : 'webpack:///',
+        moduleFilenameTemplate: '[resource-path]',
         append: hiddenSourceMap ? false : undefined,
     });
 }

package/src/angular-cli-files/plugins/bundle-budget.d.ts

@@ -17,4 +17,5 @@ export declare class BundleBudgetPlugin {
     private checkMinimum;
     private checkMaximum;
     private calculate;
+    private runChecks;
 }

package/src/angular-cli-files/plugins/bundle-budget.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const schema_1 = require("../../browser/schema");
 const bundle_calculator_1 = require("../utilities/bundle-calculator");
 const stats_1 = require("../utilities/stats");
 class BundleBudgetPlugin {
@@ -8,31 +9,25 @@ class BundleBudgetPlugin {
     }
     apply(compiler) {
         const { budgets } = this.options;
-        compiler.hooks.afterEmit.tap('BundleBudgetPlugin', (compilation) => {
-            if (!budgets || budgets.length === 0) {
-                return;
-            }
-            budgets.map(budget => {
-                const thresholds = this.calculate(budget);
-                return {
-                    budget,
-                    thresholds,
-                    sizes: bundle_calculator_1.calculateSizes(budget, compilation),
-                };
-            })
-                .forEach(budgetCheck => {
-                budgetCheck.sizes.forEach(size => {
-                    this.checkMaximum(budgetCheck.thresholds.maximumWarning, size, compilation.warnings);
-                    this.checkMaximum(budgetCheck.thresholds.maximumError, size, compilation.errors);
-                    this.checkMinimum(budgetCheck.thresholds.minimumWarning, size, compilation.warnings);
-                    this.checkMinimum(budgetCheck.thresholds.minimumError, size, compilation.errors);
-                    this.checkMinimum(budgetCheck.thresholds.warningLow, size, compilation.warnings);
-                    this.checkMaximum(budgetCheck.thresholds.warningHigh, size, compilation.warnings);
-                    this.checkMinimum(budgetCheck.thresholds.errorLow, size, compilation.errors);
-                    this.checkMaximum(budgetCheck.thresholds.errorHigh, size, compilation.errors);
-                });
+        if (!budgets || budgets.length === 0) {
+            return;
+        }
+        compiler.hooks.compilation.tap('BundleBudgetPlugin', (compilation) => {
+            compilation.hooks.afterOptimizeChunkAssets.tap('BundleBudgetPlugin', () => {
+                // In AOT compilations component styles get processed in child compilations.
+                // tslint:disable-next-line: no-any
+                const parentCompilation = compilation.compiler.parentCompilation;
+                if (!parentCompilation) {
+                    return;
+                }
+                const filteredBudgets = budgets.filter(budget => budget.type === schema_1.Type.AnyComponentStyle);
+                this.runChecks(filteredBudgets, compilation);
             });
         });
+        compiler.hooks.afterEmit.tap('BundleBudgetPlugin', (compilation) => {
+            const filteredBudgets = budgets.filter(budget => budget.type !== schema_1.Type.AnyComponentStyle);
+            this.runChecks(filteredBudgets, compilation);
+        });
     }
     checkMinimum(threshold, size, messages) {
         if (threshold) {
@@ -80,5 +75,25 @@ class BundleBudgetPlugin {
         }
         return thresholds;
     }
+    runChecks(budgets, compilation) {
+        budgets
+            .map(budget => ({
+            budget,
+            thresholds: this.calculate(budget),
+            sizes: bundle_calculator_1.calculateSizes(budget, compilation),
+        }))
+            .forEach(budgetCheck => {
+            budgetCheck.sizes.forEach(size => {
+                this.checkMaximum(budgetCheck.thresholds.maximumWarning, size, compilation.warnings);
+                this.checkMaximum(budgetCheck.thresholds.maximumError, size, compilation.errors);
+                this.checkMinimum(budgetCheck.thresholds.minimumWarning, size, compilation.warnings);
+                this.checkMinimum(budgetCheck.thresholds.minimumError, size, compilation.errors);
+                this.checkMinimum(budgetCheck.thresholds.warningLow, size, compilation.warnings);
+                this.checkMaximum(budgetCheck.thresholds.warningHigh, size, compilation.warnings);
+                this.checkMinimum(budgetCheck.thresholds.errorLow, size, compilation.errors);
+                this.checkMaximum(budgetCheck.thresholds.errorHigh, size, compilation.errors);
+            });
+        });
+    }
 }
 exports.BundleBudgetPlugin = BundleBudgetPlugin;

package/src/angular-cli-files/utilities/bundle-calculator.js

@@ -6,6 +6,7 @@ function calculateSizes(budget, compilation) {
         allScript: AllScriptCalculator,
         any: AnyCalculator,
         anyScript: AnyScriptCalculator,
+        anyComponentStyle: AnyComponentStyleCalculator,
         bundle: BundleCalculator,
         initial: InitialCalculator,
     };
@@ -74,6 +75,19 @@ class AllCalculator extends Calculator {
         return [{ size, label: 'total' }];
     }
 }
+/**
+ * Any components styles
+ */
+class AnyComponentStyleCalculator extends Calculator {
+    calculate() {
+        return Object.keys(this.compilation.assets)
+            .filter(key => key.endsWith('.css'))
+            .map(key => ({
+            size: this.compilation.assets[key].size(),
+            label: key,
+        }));
+    }
+}
 /**
  * Any script, individually.
  */

package/src/angular-cli-files/utilities/index-file/augment-index-html.js

@@ -100,7 +100,10 @@ async function augmentIndexHtml(params) {
             const isNoModuleType = noModuleFiles.some(scriptPredictor);
             const isModuleType = moduleFiles.some(scriptPredictor);
             if (isNoModuleType && !isModuleType) {
-                attrs.push({ name: 'nomodule', value: null }, { name: 'defer', value: null });
+                attrs.push({ name: 'nomodule', value: null });
+                if (!script.startsWith('polyfills-nomodule-es5')) {
+                    attrs.push({ name: 'defer', value: null });
+                }
             }
             else if (isModuleType && !isNoModuleType) {
                 attrs.push({ name: 'type', value: 'module' });

package/src/browser/index.js

@@ -134,16 +134,14 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                 let moduleFiles;
                 let files;
                 const [firstBuild, secondBuild] = buildEvents;
-                if (buildEvents.length === 2) {
+                if (isDifferentialLoadingNeeded) {
+                    const scriptsEntryPointName = webpack_configs_1.normalizeExtraEntryPoints(options.scripts || [], 'scripts')
+                        .map(x => x.bundleName);
                     moduleFiles = firstBuild.emittedFiles || [];
-                    noModuleFiles = secondBuild.emittedFiles;
-                    files = moduleFiles.filter(x => x.extension === '.css');
-                }
-                else if (options.watch && isDifferentialLoadingNeeded) {
-                    // differential loading is not enabled in watch mode
-                    // but we still want to use module type tags
-                    moduleFiles = firstBuild.emittedFiles || [];
-                    files = moduleFiles.filter(x => x.extension === '.css');
+                    files = moduleFiles.filter(x => x.extension === '.css' || (x.name && scriptsEntryPointName.includes(x.name)));
+                    if (buildEvents.length === 2) {
+                        noModuleFiles = secondBuild.emittedFiles;
+                    }
                 }
                 else {
                     const { emittedFiles = [] } = firstBuild;

package/src/browser/schema.d.ts

@@ -277,6 +277,7 @@ export declare enum Type {
     All = "all",
     AllScript = "allScript",
     Any = "any",
+    AnyComponentStyle = "anyComponentStyle",
     AnyScript = "anyScript",
     Bundle = "bundle",
     Initial = "initial"

package/src/browser/schema.js

@@ -10,6 +10,7 @@ var Type;
     Type["All"] = "all";
     Type["AllScript"] = "allScript";
     Type["Any"] = "any";
+    Type["AnyComponentStyle"] = "anyComponentStyle";
     Type["AnyScript"] = "anyScript";
     Type["Bundle"] = "bundle";
     Type["Initial"] = "initial";

package/src/browser/schema.json

@@ -482,6 +482,7 @@
             "allScript",
             "any",
             "anyScript",
+            "anyComponentStyle",
             "bundle",
             "initial"
           ]

package/src/dev-server/index.d.ts

@@ -16,7 +16,6 @@ import { Schema as BrowserBuilderSchema } from '../browser/schema';
 import { ExecutionTransformer } from '../transforms';
 import { Schema } from './schema';
 export declare type DevServerBuilderOptions = Schema & json.JsonObject;
-export declare const devServerBuildOverriddenKeys: (keyof DevServerBuilderOptions)[];
 export declare type DevServerBuilderOutput = DevServerBuildOutput & {
     baseUrl: string;
 };

package/src/dev-server/index.js

@@ -27,7 +27,7 @@ const utils_1 = require("../utils");
 const version_1 = require("../utils/version");
 const webpack_browser_config_1 = require("../utils/webpack-browser-config");
 const open = require('open');
-exports.devServerBuildOverriddenKeys = [
+const devServerBuildOverriddenKeys = [
     'watch',
     'optimization',
     'aot',
@@ -62,7 +62,7 @@ function serveWebpackBrowser(options, context, transforms = {}) {
         const rawBrowserOptions = await context.getTargetOptions(browserTarget);
         // Override options we need to override, if defined.
         const overrides = Object.keys(options)
-            .filter(key => options[key] !== undefined && exports.devServerBuildOverriddenKeys.includes(key))
+            .filter(key => options[key] !== undefined && devServerBuildOverriddenKeys.includes(key))
             .reduce((previous, key) => ({
             ...previous,
             [key]: options[key],
@@ -296,6 +296,19 @@ function _addLiveReload(options, browserOptions, webpackConfig, clientAddress, l
     if (webpackConfig.plugins === undefined) {
         webpackConfig.plugins = [];
     }
+    // Enable the internal node plugins but no individual shims
+    // This is needed to allow module specific rules to include node shims
+    // Only needed in dev server mode to support live reload capabilities in all package managers
+    if (webpackConfig.node === false) {
+        webpackConfig.node = {
+            global: false,
+            process: false,
+            __filename: false,
+            __dirname: false,
+            Buffer: false,
+            setImmediate: false,
+        };
+    }
     // This allows for live reload of page when changes are made to repo.
     // https://webpack.js.org/configuration/dev-server/#devserver-inline
     let webpackDevServerPath;

package/src/dev-server/schema.json

@@ -44,8 +44,7 @@
     },
     "verbose": {
       "type": "boolean",
-      "description": "Adds more details to output logging.",
-      "default": false
+      "description": "Adds more details to output logging."
     },
     "liveReload": {
       "type": "boolean",
@@ -117,7 +116,6 @@
     },
     "sourceMap": {
       "description": "Output sourcemaps.",
-      "default": true,
       "oneOf": [
         {
           "type": "object",
@@ -153,8 +151,7 @@
     "vendorSourceMap": {
       "type": "boolean",
       "description": "Resolve vendor packages sourcemaps.",
-      "x-deprecated": true,
-      "default": false
+      "x-deprecated": true
     },
     "evalSourceMap": {
       "type": "boolean",