fix(@angular/build): synchronize import/export conditions between bundler and TypeScript

To improve type-checking and reduce hard to diagnose errors when using the new
`production`/`development` conditions, the set of conditions used by the bundler
are now also synchronized with those used by TypeScript. This helps ensure
that type mismatches are avoided by type-checking against the actual file that
will be bundled into the output.

Author: clydin

modules/testing/builder/src/dev_prod_mode.ts

@@ -16,20 +16,22 @@ export async function setupConditionImport(harness: BuilderHarness<unknown>) {
   // Files that can be used as targets for the conditional import.
   await harness.writeFile('src/good.ts', `export const VALUE = 'good-value';`);
   await harness.writeFile('src/bad.ts', `export const VALUE = 'bad-value';`);
+  await harness.writeFile('src/wrong.ts', `export const VALUE = 1;`);
 
   // Simple application file that accesses conditional code.
   await harness.writeFile(
     'src/main.ts',
     `import {VALUE} from '#target';
 console.log(VALUE);
+console.log(VALUE.length);
 export default 42 as any;
 `,
   );
 
   // Ensure that good/bad can be resolved from tsconfig.
   const tsconfig = JSON.parse(harness.readFile('src/tsconfig.app.json')) as TypeScriptConfig;
   tsconfig.compilerOptions.moduleResolution = 'bundler';
-  tsconfig.files.push('good.ts', 'bad.ts');
+  tsconfig.files.push('good.ts', 'bad.ts', 'wrong.ts');
   await harness.writeFile('src/tsconfig.app.json', JSON.stringify(tsconfig));
 }
 

packages/angular/build/src/builders/application/tests/behavior/build-conditions_spec.ts

@@ -91,5 +91,26 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
         });
       });
     }
+
+    it('fails type-checking when import contains differing type', async () => {
+      await setTargetMapping(harness, {
+        'development': './src/wrong.ts',
+        'default': './src/good.ts',
+      });
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        optimization: false,
+      });
+
+      const { result, logs } = await harness.executeOnce({ outputLogsOnFailure: false });
+
+      expect(result?.success).toBeFalse();
+      expect(logs).toContain(
+        jasmine.objectContaining({
+          message: jasmine.stringMatching('TS2339'),
+        }),
+      );
+    });
   });
 });

packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts

@@ -286,7 +286,12 @@ export function createCompilerPlugin(
           const initializationResult = await compilation.initialize(
             pluginOptions.tsconfig,
             hostOptions,
-            createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks),
+            createCompilerOptionsTransformer(
+              setupWarnings,
+              pluginOptions,
+              preserveSymlinks,
+              build.initialOptions.conditions,
+            ),
           );
           shouldTsIgnoreJs = !initializationResult.compilerOptions.allowJs;
           // Isolated modules option ensures safe non-TypeScript transpilation.
@@ -572,6 +577,7 @@ function createCompilerOptionsTransformer(
   setupWarnings: PartialMessage[] | undefined,
   pluginOptions: CompilerPluginOptions,
   preserveSymlinks: boolean | undefined,
+  customConditions: string[] | undefined,
 ): Parameters<AngularCompilation['initialize']>[2] {
   return (compilerOptions) => {
     // target of 9 is ES2022 (using the number avoids an expensive import of typescript just for an enum)
@@ -631,6 +637,12 @@ function createCompilerOptionsTransformer(
       });
     }
 
+    // Synchronize custom resolve conditions.
+    // Set if using the supported bundler resolution mode (bundler is the default in new projects)
+    if (compilerOptions.moduleResolution === 100 /* ModuleResolutionKind.Bundler */) {
+      compilerOptions.customConditions = customConditions;
+    }
+
     return {
       ...compilerOptions,
       noEmitOnError: false,