fix(@angular-devkit/build-angular): styles that are not injected do count for initial bundle size

Closes #17672

Author: alan-agius4

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -274,8 +274,11 @@ export function buildWebpackBrowser(
             }
 
             // Fix incorrectly set `initial` value on chunks.
-            const extraEntryPoints = normalizeExtraEntryPoints(options.styles || [], 'styles')
-              .concat(normalizeExtraEntryPoints(options.scripts || [], 'scripts'));
+            const extraEntryPoints = [
+              ...normalizeExtraEntryPoints(options.styles || [], 'styles'),
+              ...normalizeExtraEntryPoints(options.scripts || [], 'scripts'),
+            ];
+
             const webpackStats = {
               ...webpackRawStats,
               chunks: markAsyncChunksNonInitial(webpackRawStats, extraEntryPoints),

packages/angular_devkit/build_angular/src/webpack/configs/common.ts

@@ -361,10 +361,15 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
     );
   }
 
-  if (!differentialLoadingMode) {
+  if (buildOptions.budgets.length && !differentialLoadingMode) {
     // Budgets are computed after differential builds, not via a plugin.
     // https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/browser/index.ts
-    extraPlugins.push(new BundleBudgetPlugin({ budgets: buildOptions.budgets }));
+    const extraEntryPoints = [
+      ...normalizeExtraEntryPoints(buildOptions.styles || [], 'styles'),
+      ...normalizeExtraEntryPoints(buildOptions.scripts || [], 'scripts'),
+    ];
+
+    extraPlugins.push(new BundleBudgetPlugin({ budgets: buildOptions.budgets, extraEntryPoints }));
   }
 
   if ((scriptsSourceMap || stylesSourceMap)) {

packages/angular_devkit/build_angular/src/webpack/plugins/bundle-budget.ts

@@ -10,9 +10,12 @@ import { Budget } from '../../browser/schema';
 import { ThresholdSeverity, checkBudgets } from '../../utils/bundle-calculator';
 import { ProcessBundleResult } from '../../utils/process-bundle';
 import { addError, addWarning } from '../../utils/webpack-diagnostics';
+import { markAsyncChunksNonInitial } from '../utils/async-chunks';
+import { NormalizedEntryPoint } from '../utils/helpers';
 
 export interface BundleBudgetPluginOptions {
   budgets: Budget[];
+  extraEntryPoints: NormalizedEntryPoint[];
 }
 
 export class BundleBudgetPlugin {
@@ -30,7 +33,10 @@ export class BundleBudgetPlugin {
       // builds are disabled.
       const processResults: ProcessBundleResult[] = [];
 
+      // Fix incorrectly set `initial` value on chunks.
       const stats = compilation.getStats().toJson();
+      stats.chunks = markAsyncChunksNonInitial(stats, this.options.extraEntryPoints);
+
       for (const { severity, message } of checkBudgets(budgets, stats, processResults)) {
         switch (severity) {
           case ThresholdSeverity.Warning:

packages/angular_devkit/build_angular/src/webpack/utils/async-chunks.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import * as webpack from 'webpack';
-import { NormalizedEntryPoint } from '../configs';
+import { NormalizedEntryPoint } from './helpers';
 
 /**
  * Webpack stats may incorrectly mark extra entry points `initial` chunks, when