feat(compiler): support multiple configuration files in extends (#49125)

alan-agius4 · thePunderWoman · commit 1407a9aeaf5e · 2023-03-06T16:57:28.000Z
TypeScript 5 support `extends` to be an array, this commit adds support to allow extending `angularCompilerOptions` from multiple config files. See: https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/#supporting-multiple-configuration-files-in-extends PR Close #49125
diff --git a/packages/compiler-cli/src/perform_compile.ts b/packages/compiler-cli/src/perform_compile.ts
@@ -57,6 +57,7 @@ export function calcProjectFileAndBasePath(
   const projectFile = projectIsDir ? host.join(absProject, 'tsconfig.json') : absProject;
   const projectDir = projectIsDir ? absProject : host.dirname(absProject);
   const basePath = host.resolve(projectDir);
+
   return {projectFile, basePath};
 }
 
@@ -79,25 +80,34 @@ export function readConfiguration(
 
           // we are only interested into merging 'angularCompilerOptions' as
           // other options like 'compilerOptions' are merged by TS
-          const existingNgCompilerOptions = {...config.angularCompilerOptions, ...parentOptions};
+          let existingNgCompilerOptions = {...config.angularCompilerOptions, ...parentOptions};
+          if (!config.extends) {
+            return existingNgCompilerOptions;
+          }
 
-          if (config.extends && typeof config.extends === 'string') {
+          const extendsPaths: string[] =
+              typeof config.extends === 'string' ? [config.extends] : config.extends;
+
+          // Call readAngularCompilerOptions recursively to merge NG Compiler options
+          // Reverse the array so the overrides happen from right to left.
+          return [...extendsPaths].reverse().reduce((prevOptions, extendsPath) => {
             const extendedConfigPath = getExtendedConfigPath(
-                configFile, config.extends, host, fs,
+                configFile,
+                extendsPath,
+                host,
+                fs,
             );
 
-            if (extendedConfigPath !== null) {
-              // Call readAngularCompilerOptions recursively to merge NG Compiler options
-              return readAngularCompilerOptions(extendedConfigPath, existingNgCompilerOptions);
-            }
-          }
-
-          return existingNgCompilerOptions;
+            return extendedConfigPath === null ?
+                prevOptions :
+                readAngularCompilerOptions(extendedConfigPath, prevOptions);
+          }, existingNgCompilerOptions);
         };
 
     const {projectFile, basePath} = calcProjectFileAndBasePath(project, host);
     const configFileName = host.resolve(host.pwd(), projectFile);
     const {config, error} = readConfigFile(projectFile);
+
     if (error) {
       return {
         project,
@@ -107,6 +117,7 @@ export function readConfiguration(
         emitFlags: api.EmitFlags.Default
       };
     }
+
     const existingCompilerOptions: api.CompilerOptions = {
       genDir: basePath,
       basePath,
diff --git a/packages/compiler-cli/test/perform_compile_spec.ts b/packages/compiler-cli/test/perform_compile_spec.ts
@@ -194,4 +194,52 @@ describe('perform_compile', () => {
          debug: false,
        }));
      });
+
+  it('should merge tsconfig "angularCompilerOptions" when extends is an array', () => {
+    support.writeFiles({
+      'tsconfig-level-1.json': `{
+        "extends": [
+          "./tsconfig-level-2.json",
+          "./tsconfig-level-3.json",
+        ],
+        "compilerOptions": {
+          "target": "es2020"
+        },
+        "angularCompilerOptions": {
+          "annotateForClosureCompiler": false,
+          "debug": false
+        }
+      }`,
+      'tsconfig-level-2.json': `{
+        "compilerOptions": {
+          "target": "es5",
+          "module": "es2015"
+        },
+        "angularCompilerOptions": {
+          "skipMetadataEmit": true,
+          "annotationsAs": "decorators"
+        }
+      }`,
+      'tsconfig-level-3.json': `{
+        "compilerOptions": {
+          "target": "esnext",
+          "module": "esnext"
+        },
+        "angularCompilerOptions": {
+          "annotateForClosureCompiler": true,
+          "skipMetadataEmit": false
+        }
+      }`,
+    });
+
+    const {options} = readConfiguration(path.resolve(basePath, 'tsconfig-level-1.json'));
+    expect(options).toEqual(jasmine.objectContaining({
+      target: ts.ScriptTarget.ES2020,
+      module: ts.ModuleKind.ESNext,
+      debug: false,
+      annotationsAs: 'decorators',
+      annotateForClosureCompiler: false,
+      skipMetadataEmit: false,
+    }));
+  });
 });
