fix(angular): set tsconfig paths relative to the workspace root in ta…

…rget options (#20507)

packages/angular/src/builders/dev-server/dev-server.impl.ts

@@ -2,6 +2,7 @@ import type { BuilderContext } from '@angular-devkit/architect';
 import type { DevServerBuilderOptions } from '@angular-devkit/build-angular';
 import {
   joinPathFragments,
+  normalizePath,
   parseTargetString,
   readCachedProjectGraph,
 } from '@nx/devkit';
@@ -11,6 +12,7 @@ import { WebpackNxBuildCoordinationPlugin } from '@nx/webpack/src/plugins/webpac
 import { existsSync } from 'fs';
 import { isNpmProject } from 'nx/src/project-graph/operators';
 import { readCachedProjectConfiguration } from 'nx/src/project-graph/project-graph';
+import { relative } from 'path';
 import { from } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { getInstalledAngularVersionInfo } from '../../executors/utilities/angular-version-utils';
@@ -104,6 +106,9 @@ export function executeDevServerBuilder(
         target: parsedBuildTarget.target,
       });
     dependencies = foundDependencies;
+    const relativeTsConfigPath = normalizePath(
+      relative(context.workspaceRoot, tsConfigPath)
+    );
 
     // We can't just pass the tsconfig path in memory to the angular builder
     // function because we can't pass the build target options to it, the build
@@ -114,15 +119,15 @@ export function executeDevServerBuilder(
     const originalGetTargetOptions = context.getTargetOptions;
     context.getTargetOptions = async (target) => {
       const options = await originalGetTargetOptions(target);
-      options.tsConfig = tsConfigPath;
+      options.tsConfig = relativeTsConfigPath;
       return options;
     };
 
     // The buildTargetConfiguration also needs to use the generated tsconfig path
     // otherwise the build will fail if customWebpack function/file is referencing
     // local libs. This synchronize the behavior with webpack-browser and
     // webpack-server implementation.
-    buildTargetOptions.tsConfig = tsConfigPath;
+    buildTargetOptions.tsConfig = relativeTsConfigPath;
   }
 
   const delegateBuilderOptions = getDelegateBuilderOptions(options);

packages/angular/src/builders/webpack-browser/webpack-browser.impl.ts

@@ -1,5 +1,6 @@
 import {
   joinPathFragments,
+  normalizePath,
   ProjectGraph,
   readCachedProjectGraph,
 } from '@nx/devkit';
@@ -9,7 +10,7 @@ import { existsSync } from 'fs';
 import { readNxJson } from 'nx/src/config/configuration';
 import { isNpmProject } from 'nx/src/project-graph/operators';
 import { getDependencyConfigs } from 'nx/src/tasks-runner/utils';
-import { join } from 'path';
+import { relative } from 'path';
 import { from, Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { createTmpTsConfigForBuildableLibs } from '../utilities/buildable-libs';
@@ -85,7 +86,9 @@ export function executeWebpackBrowserBuilder(
         { projectGraph }
       );
     dependencies = foundDependencies;
-    delegateBuilderOptions.tsConfig = tsConfigPath;
+    delegateBuilderOptions.tsConfig = normalizePath(
+      relative(context.workspaceRoot, tsConfigPath)
+    );
   }
 
   return from(import('@angular-devkit/build-angular')).pipe(

packages/angular/src/builders/webpack-server/webpack-server.impl.ts

@@ -1,5 +1,6 @@
-import { joinPathFragments } from '@nx/devkit';
+import { joinPathFragments, normalizePath } from '@nx/devkit';
 import { existsSync } from 'fs';
+import { relative } from 'path';
 import { Observable, from } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { createTmpTsConfigForBuildableLibs } from '../utilities/buildable-libs';
@@ -100,7 +101,9 @@ export function executeWebpackServerBuilder(
       options.tsConfig,
       context
     );
-    options.tsConfig = tsConfigPath;
+    options.tsConfig = normalizePath(
+      relative(context.workspaceRoot, tsConfigPath)
+    );
   }
 
   return buildServerApp(options, context);