From f384c0ed9b3aebc20796874fc7c0586325fc6db0 Mon Sep 17 00:00:00 2001 From: Mark Date: Thu, 2 Dec 2021 23:59:24 -0600 Subject: [PATCH] Fix tsConfig paths not resolving for Angular >=12.2 --- .../minimal-config/angular.json | 1 + .../__mocks-ng-workspace__/some-config/angular.json | 1 + .../with-angularBrowserTarget/angular.json | 4 ++++ .../with-nx-workspace/workspace.json | 1 + .../__mocks-ng-workspace__/with-nx/angular.json | 1 + .../with-options-styles/angular.json | 1 + .../src/server/angular-cli-webpack-12.2.x.js | 7 +++++++ .../src/server/angular-cli-webpack-13.x.x.js | 7 +++++++ .../src/server/angular-devkit-build-webpack.ts | 2 +- .../src/server/framework-preset-angular-cli.test.ts | 13 +++++++++++-- 10 files changed, 35 insertions(+), 3 deletions(-) diff --git a/app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json index ac7d21f9eb2c..f3dcfcd45586 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json @@ -3,6 +3,7 @@ "projects": { "foo-project": { "root": "", + "sourceRoot": "src", "architect": { "build": { "options": { diff --git a/app/angular/src/server/__mocks-ng-workspace__/some-config/angular.json b/app/angular/src/server/__mocks-ng-workspace__/some-config/angular.json index 3d3cb9cde581..358ec4f98f18 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/some-config/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/some-config/angular.json @@ -3,6 +3,7 @@ "projects": { "foo-project": { "root": "", + "sourceRoot": "src", "architect": { "build": { "options": { diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-angularBrowserTarget/angular.json b/app/angular/src/server/__mocks-ng-workspace__/with-angularBrowserTarget/angular.json index 0bd10ad584f9..f55b743522a1 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/with-angularBrowserTarget/angular.json +++ b/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": { diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-nx-workspace/workspace.json b/app/angular/src/server/__mocks-ng-workspace__/with-nx-workspace/workspace.json index 39f1562a36a7..9d9fc9b3ef36 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/with-nx-workspace/workspace.json +++ b/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": { diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json b/app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json index 39f1562a36a7..9d9fc9b3ef36 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json @@ -3,6 +3,7 @@ "projects": { "foo-project": { "root": "", + "sourceRoot": "src", "architect": { "build": { "options": { diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json index 39f1562a36a7..9d9fc9b3ef36 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json +++ b/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": { diff --git a/app/angular/src/server/angular-cli-webpack-12.2.x.js b/app/angular/src/server/angular-cli-webpack-12.2.x.js index 3f1d69e5863e..bb3f12011b8a 100644 --- a/app/angular/src/server/angular-cli-webpack-12.2.x.js +++ b/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 { diff --git a/app/angular/src/server/angular-cli-webpack-13.x.x.js b/app/angular/src/server/angular-cli-webpack-13.x.x.js index 0455e07047f6..0044df01b1a6 100644 --- a/app/angular/src/server/angular-cli-webpack-13.x.x.js +++ b/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 { diff --git a/app/angular/src/server/angular-devkit-build-webpack.ts b/app/angular/src/server/angular-devkit-build-webpack.ts index 6f2e26f05291..9d9ed78cbd0b 100644 --- a/app/angular/src/server/angular-devkit-build-webpack.ts +++ b/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, diff --git a/app/angular/src/server/framework-preset-angular-cli.test.ts b/app/angular/src/server/framework-preset-angular-cli.test.ts index 8b2c1959d621..09a6e9b6a514 100644 --- a/app/angular/src/server/framework-preset-angular-cli.test.ts +++ b/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(), });