Angular: Fix tsConfig paths not resolving for Angular >=12.2

app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json

@@ -3,6 +3,7 @@
   "projects": {
     "foo-project": {
       "root": "",
+      "sourceRoot": "src",
       "architect": {
         "build": {
           "options": {

app/angular/src/server/__mocks-ng-workspace__/some-config/angular.json

@@ -3,6 +3,7 @@
   "projects": {
     "foo-project": {
       "root": "",
+      "sourceRoot": "src",
       "architect": {
         "build": {
           "options": {

app/angular/src/server/__mocks-ng-workspace__/with-angularBrowserTarget/angular.json

@@ -3,6 +3,7 @@
   "projects": {
     "foo-project": {
       "root": "",
+      "sourceRoot": "src",
       "architect": {
         "build": {
           "options": {
@@ -14,6 +15,7 @@
     },
     "no-confs-project": {
       "root": "",
+      "sourceRoot": "src",
       "architect": {
         "target-build": {
           "options": {
@@ -25,6 +27,7 @@
     },
     "no-target-conf-project": {
       "root": "",
+      "sourceRoot": "src",
       "architect": {
         "target-build": {
           "options": {
@@ -41,6 +44,7 @@
     },
     "target-project": {
       "root": "",
+      "sourceRoot": "src",
       "architect": {
         "target-build": {
           "options": {

app/angular/src/server/__mocks-ng-workspace__/with-nx-workspace/workspace.json

@@ -3,6 +3,7 @@
   "projects": {
     "foo-project": {
       "root": "",
+      "sourceRoot": "src",
       "architect": {
         "build": {
           "options": {

app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json

@@ -3,6 +3,7 @@
   "projects": {
     "foo-project": {
       "root": "",
+      "sourceRoot": "src",
       "architect": {
         "build": {
           "options": {

app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json

@@ -3,6 +3,7 @@
   "projects": {
     "foo-project": {
       "root": "",
+      "sourceRoot": "src",
       "architect": {
         "build": {
           "options": {

app/angular/src/server/angular-cli-webpack-12.2.x.js

@@ -7,6 +7,7 @@ const {
   getStylesConfig,
   getTypeScriptConfig,
 } = require('@angular-devkit/build-angular/src/webpack/configs');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 const { filterOutStylingRules } = require('./utils/filter-out-styling-rules');
 
@@ -65,6 +66,12 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
   const resolve = {
     ...baseConfig.resolve,
     modules: Array.from(new Set([...baseConfig.resolve.modules, ...cliConfig.resolve.modules])),
+    plugins: [
+      new TsconfigPathsPlugin({
+        configFile: builderOptions.tsConfig,
+        mainFields: ['browser', 'module', 'main'],
+      }),
+    ],
   };
 
   return {

app/angular/src/server/angular-cli-webpack-13.x.x.js

@@ -7,6 +7,7 @@ const {
   getStylesConfig,
   getTypescriptWorkerPlugin,
 } = require('@angular-devkit/build-angular/src/webpack/configs');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 const { filterOutStylingRules } = require('./utils/filter-out-styling-rules');
 
@@ -65,6 +66,12 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
   const resolve = {
     ...baseConfig.resolve,
     modules: Array.from(new Set([...baseConfig.resolve.modules, ...cliConfig.resolve.modules])),
+    plugins: [
+      new TsconfigPathsPlugin({
+        configFile: builderOptions.tsConfig,
+        mainFields: ['browser', 'module', 'main'],
+      }),
+    ],
   };
 
   return {

app/angular/src/server/angular-devkit-build-webpack.ts

@@ -139,7 +139,7 @@ const buildWebpackConfigOptions = async (
     // The dependency of `@angular-devkit/build-angular` to `@angular-devkit/core` is not exactly the same version as the one for storybook (node modules of node modules ^^)
     logger: (createConsoleLogger() as unknown) as WebpackConfigOptions['logger'],
     projectRoot: getSystemPath(projectRootNormalized),
-    sourceRoot: getSystemPath(sourceRootNormalized),
+    sourceRoot: sourceRootNormalized ? getSystemPath(sourceRootNormalized) : undefined,
     buildOptions,
     tsConfig,
     tsConfigPath,

app/angular/src/server/framework-preset-angular-cli.test.ts

@@ -1,6 +1,7 @@
 /* eslint-disable jest/no-interpolation-in-snapshots */
 import { Configuration } from 'webpack';
 import { logger } from '@storybook/node-logger';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 import { webpackFinal } from './framework-preset-angular-cli';
 import { PresetOptions } from './options';
 
@@ -189,7 +190,11 @@ describe('framework-preset-angular-cli', () => {
           ...baseWebpackConfig.resolve,
           modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),
           // the base resolve.plugins are not kept 🤷‍♂️
-          plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins),
+          plugins: expect.arrayContaining([
+            expect.objectContaining({
+              absoluteBaseUrl: expect.any(String),
+            } as TsconfigPathsPlugin),
+          ]),
         },
         resolveLoader: expect.anything(),
       });
@@ -480,7 +485,11 @@ describe('framework-preset-angular-cli', () => {
           ...baseWebpackConfig.resolve,
           modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),
           // the base resolve.plugins are not kept 🤷‍♂️
-          plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins),
+          plugins: expect.arrayContaining([
+            expect.objectContaining({
+              absoluteBaseUrl: expect.any(String),
+            } as TsconfigPathsPlugin),
+          ]),
         },
         resolveLoader: expect.anything(),
       });