refactor(@ngtools/webpack): support optional baseUrl with tsconfig paths

The Webpack plugin now ensures a `baseUrl` is set when `paths` are present, using the `pathsBasePath` as a fallback. This makes the `baseUrl` property optional in `tsconfig.json` files when `paths` are used.

This commit also refactors several tests to remove their reliance on a pre-existing `baseUrl`. The tests now programmatically add `paths` to the `tsconfig.json` to avoid brittle string replacements. The test project's base `tsconfig.json` has also been updated to remove the now optional `baseUrl`.

Author: clydin

modules/testing/builder/projects/hello-world-app/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,

packages/angular/build/src/builders/application/tests/behavior/typescript-path-mapping_spec.ts

@@ -81,7 +81,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       await harness.modifyFile('tsconfig.json', (content) => {
         const tsconfig = JSON.parse(content);
         tsconfig.compilerOptions.paths = {
-          'app-module': ['a.js'],
+          'app-module': ['./a.js'],
         };
 
         return JSON.stringify(tsconfig);

packages/angular/build/src/builders/application/tests/options/allowed-common-js-dependencies_spec.ts

@@ -129,17 +129,13 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
 
     it('should not show warning in JIT for templateUrl and styleUrl when using paths', async () => {
       await harness.modifyFile('tsconfig.json', (content) => {
-        return content.replace(
-          /"baseUrl": ".\/",/,
-          `
-            "baseUrl": "./",
-            "paths": {
-              "@app/*": [
-                "src/app/*"
-              ]
-            },
-          `,
-        );
+        const tsconfig = JSON.parse(content);
+        tsconfig.compilerOptions ??= {};
+        tsconfig.compilerOptions.paths = {
+          '@app/*': ['./src/app/*'],
+        };
+
+        return JSON.stringify(tsconfig, null, 2);
       });
 
       await harness.modifyFile('src/app/app.module.ts', (content) =>

packages/angular/build/src/builders/karma/tests/options/code-coverage_spec.ts

@@ -88,19 +88,15 @@ describeKarmaBuilder(execute, KARMA_BUILDER_INFO, (harness, setupTarget) => {
           }
         `,
       });
-      await harness.modifyFile('tsconfig.json', (content) =>
-        content.replace(
-          /"baseUrl": ".\/",/,
-          `
-            "baseUrl": "./",
-            "paths": {
-              "my-lib": [
-                "./dist/my-lib"
-              ]
-            },
-          `,
-        ),
-      );
+      await harness.modifyFile('tsconfig.json', (content) => {
+        const tsconfig = JSON.parse(content);
+        tsconfig.compilerOptions ??= {};
+        tsconfig.compilerOptions.paths = {
+          'my-lib': ['./dist/my-lib'],
+        };
+
+        return JSON.stringify(tsconfig, null, 2);
+      });
 
       harness.useTarget('test', {
         ...BASE_OPTIONS,

packages/angular_devkit/build_angular/src/builders/browser/specs/tsconfig-paths_spec.ts

@@ -7,6 +7,7 @@
  */
 
 import { Architect } from '@angular-devkit/architect';
+import { normalize, virtualFs } from '@angular-devkit/core';
 import { browserBuild, createArchitect, host } from '../../../testing/test-utils';
 
 describe('Browser Builder tsconfig paths', () => {
@@ -21,18 +22,16 @@ describe('Browser Builder tsconfig paths', () => {
 
   it('should resolve basic tsconfig paths', async () => {
     host.replaceInFile('src/app/app.module.ts', './app.component', '@root/app/app.component');
-    host.replaceInFile(
-      'tsconfig.json',
-      /"baseUrl": ".\/",/,
-      `
-      "baseUrl": "./",
-      "paths": {
-        "@root/*": [
-          "./src/*"
-        ]
-      },
-    `,
-    );
+
+    const tsconfigPath = normalize('tsconfig.json');
+    const tsconfig = JSON.parse(virtualFs.fileBufferToString(host.scopedSync().read(tsconfigPath)));
+    tsconfig.compilerOptions ??= {};
+    tsconfig.compilerOptions.paths = {
+      '@root/*': ['./src/*'],
+    };
+    host
+      .scopedSync()
+      .write(tsconfigPath, virtualFs.stringToFileBuffer(JSON.stringify(tsconfig, null, 2)));
 
     await browserBuild(architect, host, target);
   });
@@ -43,25 +42,17 @@ describe('Browser Builder tsconfig paths', () => {
       'src/app/shared/meaning.ts': 'export var meaning = 42;',
       'src/app/shared/index.ts': `export * from './meaning'`,
     });
-    host.replaceInFile(
-      'tsconfig.json',
-      /"baseUrl": ".\/",/,
-      `
-      "baseUrl": "./",
-      "paths": {
-        "@shared": [
-          "src/app/shared"
-        ],
-        "@shared/*": [
-          "src/app/shared/*"
-        ],
-        "*": [
-          "*",
-          "src/app/shared/*"
-        ]
-      },
-    `,
-    );
+    const tsconfigPath = normalize('tsconfig.json');
+    const tsconfig = JSON.parse(virtualFs.fileBufferToString(host.scopedSync().read(tsconfigPath)));
+    tsconfig.compilerOptions ??= {};
+    tsconfig.compilerOptions.paths = {
+      '@shared': ['src/app/shared'],
+      '@shared/*': ['src/app/shared/*'],
+      '*': ['*', 'src/app/shared/*'],
+    };
+    host
+      .scopedSync()
+      .write(tsconfigPath, virtualFs.stringToFileBuffer(JSON.stringify(tsconfig, null, 2)));
     host.appendToFile(
       'src/app/app.component.ts',
       `

packages/angular_devkit/build_angular/src/builders/browser/tests/options/allowed-common-js-dependencies_spec.ts

@@ -119,17 +119,13 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
 
     it('should not show warning in JIT for templateUrl and styleUrl when using paths', async () => {
       await harness.modifyFile('tsconfig.json', (content) => {
-        return content.replace(
-          /"baseUrl": ".\/",/,
-          `
-            "baseUrl": "./",
-            "paths": {
-              "@app/*": [
-                "src/app/*"
-              ]
-            },
-          `,
-        );
+        const tsconfig = JSON.parse(content);
+        tsconfig.compilerOptions ??= {};
+        tsconfig.compilerOptions.paths = {
+          '@app/*': ['src/app/*'],
+        };
+
+        return JSON.stringify(tsconfig, null, 2);
       });
 
       await harness.modifyFile('src/app/app.module.ts', (content) =>

packages/angular_devkit/build_angular/src/builders/karma/tests/options/code-coverage_spec.ts

@@ -88,19 +88,15 @@ describeKarmaBuilder(execute, KARMA_BUILDER_INFO, (harness, setupTarget) => {
           }
         `,
       });
-      await harness.modifyFile('tsconfig.json', (content) =>
-        content.replace(
-          /"baseUrl": ".\/",/,
-          `
-            "baseUrl": "./",
-            "paths": {
-              "my-lib": [
-                "./dist/my-lib"
-              ]
-            },
-          `,
-        ),
-      );
+      await harness.modifyFile('tsconfig.json', (content) => {
+        const tsconfig = JSON.parse(content);
+        tsconfig.compilerOptions ??= {};
+        tsconfig.compilerOptions.paths = {
+          'my-lib': ['./dist/my-lib'],
+        };
+
+        return JSON.stringify(tsconfig, null, 2);
+      });
 
       harness.useTarget('test', {
         ...BASE_OPTIONS,

packages/ngtools/webpack/src/ivy/plugin.ts

@@ -410,6 +410,7 @@ export class AngularWebpackPlugin {
       this.pluginOptions.tsconfig,
       this.pluginOptions.compilerOptions,
     );
+    compilerOptions.baseUrl ??= compilerOptions['pathsBasePath'];
     compilerOptions.composite = false;
     compilerOptions.noEmitOnError = false;
     compilerOptions.suppressOutputPathCheck = true;