fix(@angular-devkit/build-angular): only set ngDevMode when script optimizations are enabled

clydin · clydin · commit 9fd356234210 · 2022-12-13T09:28:26.000-05:00
When using the experimental esbuild-based browser application builder, the `ngDevMode` global runtime variable was unintentionally always being set to false due to a previous bug fix that stopped the variable from being replaced with the value of true when script optimizations were disabled. By doing so, the fix caused the imported compiler-cli `GLOBAL_DEFS_FOR_TERSER_WITH_AOT` constant to take precedence which contains an `ngDevMode` value of false. To prevent this situation for development builds where a non-false `ngDevMode` is helpful to surface potential runtime problems, `GLOBAL_DEFS_FOR_TERSER_WITH_AOT` will no longer change the value of `ngDevMode`. This fix does not have any effect on production builds since `ngDevMode` would have been set to false regardless. (cherry picked from commit 310144d)
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/compiler-plugin.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/compiler-plugin.ts
@@ -192,6 +192,10 @@ export function createCompilerPlugin(
           // Skip keys that have been manually provided
           continue;
         }
+        if (key === 'ngDevMode') {
+          // ngDevMode is already set based on the builder's script optimization option
+          continue;
+        }
         // esbuild requires values to be a string (actual strings need to be quoted).
         // In this case, all provided values are booleans.
         build.initialOptions.define[key] = value.toString();
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts
@@ -296,7 +296,11 @@ function createCodeBundleOptions(
       ),
     ],
     define: {
+      // Only set to false when script optimizations are enabled. It should not be set to true because
+      // Angular turns `ngDevMode` into an object for development debugging purposes when not defined
+      // which a constant true value would break.
       ...(optimizationOptions.scripts ? { 'ngDevMode': 'false' } : undefined),
+      // Only AOT mode is supported currently
       'ngJitMode': 'false',
     },
   };
