refactor(@angular-devkit/build-angular): add additional debug build environment variables

`NG_BUILD_MINIFY` can be used to separately disable minification (terser's compress)
`NG_BUILD_BEAUTIFY` can be used to format the output code even when otherwise optimized

Author: clydin

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -30,7 +30,7 @@ import { RawSource } from 'webpack-sources';
 import { AssetPatternClass, ExtraEntryPoint } from '../../../browser/schema';
 import { BuildBrowserFeatures } from '../../../utils';
 import { findCachePath } from '../../../utils/cache-path';
-import { cachingDisabled, manglingDisabled } from '../../../utils/environment-options';
+import { beautifyEnabled, cachingDisabled, manglingDisabled, minifyDisabled } from '../../../utils/environment-options';
 import { BundleBudgetPlugin } from '../../plugins/bundle-budget';
 import { NamedLazyChunksPlugin } from '../../plugins/named-chunks-plugin';
 import { OptimizeCssWebpackPlugin } from '../../plugins/optimize-css-webpack-plugin';
@@ -410,11 +410,13 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
         // default behavior (undefined value) is to keep only important comments (licenses, etc.)
         comments: !buildOptions.extractLicenses && undefined,
         webkit: true,
+        beautify: beautifyEnabled,
       },
       // 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:
-        buildOptions.platform == 'server'
+        !minifyDisabled &&
+        (buildOptions.platform == 'server'
           ? {
               ecma: terserEcma,
               global_defs: angularGlobalDefinitions,
@@ -427,13 +429,10 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
               // See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
               passes: buildOptions.buildOptimizer ? 3 : 1,
               global_defs: angularGlobalDefinitions,
-            },
+            }),
       // We also want to avoid mangling on server.
       // Name mangling is handled within the browser builder
-      mangle:
-        !manglingDisabled &&
-        buildOptions.platform !== 'server' &&
-        !differentialLoadingMode,
+      mangle: !manglingDisabled && buildOptions.platform !== 'server' && !differentialLoadingMode,
     };
 
     extraMinimizers.push(
@@ -457,7 +456,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
           globalScriptsByBundleName.some(s => s.bundleName === chunk.name),
         terserOptions: {
           ...terserOptions,
-          compress: {
+          compress: !minifyDisabled && {
             ...terserOptions.compress,
             ecma: 5,
           },

packages/angular_devkit/build_angular/src/utils/environment-options.ts

@@ -7,19 +7,31 @@
  */
 import * as path from 'path';
 
+function isDisabled(variable: string): boolean {
+  return variable === '0' || variable.toLowerCase() === 'false';
+}
+
+function isEnabled(variable: string): boolean {
+  return variable === '1' || variable.toLowerCase() === 'true';
+}
+
+function isPresent(variable: string | undefined): variable is string {
+  return typeof variable === 'string' && variable !== '';
+}
+
 const mangleVariable = process.env['NG_BUILD_MANGLE'];
-export const manglingDisabled =
-  !!mangleVariable && (mangleVariable === '0' || mangleVariable.toLowerCase() === 'false');
+export const manglingDisabled = isPresent(mangleVariable) && isDisabled(mangleVariable);
+
+const beautifyVariable = process.env['NG_BUILD_BEAUTIFY'];
+export const beautifyEnabled = isPresent(beautifyVariable) && !isDisabled(beautifyVariable);
+
+const minifyVariable = process.env['NG_BUILD_MINIFY'];
+export const minifyDisabled = isPresent(minifyVariable) && isDisabled(minifyVariable);
 
 const cacheVariable = process.env['NG_BUILD_CACHE'];
-export const cachingDisabled =
-  !!cacheVariable && (cacheVariable === '0' || cacheVariable.toLowerCase() === 'false');
+export const cachingDisabled = isPresent(cacheVariable) && isDisabled(cacheVariable);
 export const cachingBasePath = (() => {
-  if (
-    cachingDisabled ||
-    !cacheVariable ||
-    (cacheVariable === '1' || cacheVariable.toLowerCase() === 'true')
-  ) {
+  if (cachingDisabled || !isPresent(cacheVariable) || isEnabled(cacheVariable)) {
     return null;
   }
   if (!path.isAbsolute(cacheVariable)) {

packages/angular_devkit/build_angular/src/utils/process-bundle.ts

@@ -21,7 +21,7 @@ import { RawSourceMap } from 'source-map';
 import { minify } from 'terser';
 import * as v8 from 'v8';
 import { SourceMapSource } from 'webpack-sources';
-import { manglingDisabled } from './environment-options';
+import { beautifyEnabled, manglingDisabled, minifyDisabled } from './environment-options';
 import { I18nOptions } from './i18n-options';
 
 const cacache = require('cacache');
@@ -132,9 +132,8 @@ export async function process(options: ProcessBundleOptions): Promise<ProcessBun
         },
       ]],
       plugins: options.replacements ? [createReplacePlugin(options.replacements)] : [],
-      minified: options.optimize,
-      // `false` ensures it is disabled and prevents large file warnings
-      compact: options.optimize || false,
+      minified: !minifyDisabled && !!options.optimize,
+      compact: !beautifyEnabled && !!options.optimize,
       sourceMaps: !!sourceMap,
     });
 
@@ -275,13 +274,14 @@ function terserMangle(
 
   // Mangle downlevel code
   const minifyOutput = minify(options.filename ? { [options.filename]: code } : code, {
-    compress: options.compress || false,
+    compress: !minifyDisabled && !!options.compress,
     ecma: options.ecma || 5,
     mangle: !manglingDisabled,
     safari10: true,
     output: {
       ascii_only: true,
       webkit: true,
+      beautify: beautifyEnabled,
     },
     sourceMap:
       !!options.map &&