diff --git a/app/angular/src/server/framework-preset-angular-cli.ts b/app/angular/src/server/framework-preset-angular-cli.ts index 12bfbf2f371d..f700cee1ef3d 100644 --- a/app/angular/src/server/framework-preset-angular-cli.ts +++ b/app/angular/src/server/framework-preset-angular-cli.ts @@ -1,15 +1,20 @@ import webpack from 'webpack'; import { logger } from '@storybook/node-logger'; -import { targetFromTargetString, BuilderContext } from '@angular-devkit/architect'; +import { targetFromTargetString, BuilderContext, Target } from '@angular-devkit/architect'; import { sync as findUpSync } from 'find-up'; import semver from '@storybook/semver'; -import { logging, JsonObject } from '@angular-devkit/core'; +import { logging, JsonObject, workspaces } from '@angular-devkit/core'; import { moduleIsAvailable } from './utils/module-is-available'; import { getWebpackConfig as getWebpackConfig12_2_x } from './angular-cli-webpack-12.2.x'; import { getWebpackConfig as getWebpackConfig13_x_x } from './angular-cli-webpack-13.x.x'; import { getWebpackConfig as getWebpackConfigOlder } from './angular-cli-webpack-older'; import { PresetOptions } from './options'; +import { + getDefaultProjectName, + findAngularProjectTarget, + readAngularWorkspaceConfig, +} from './angular-read-workspace'; export async function webpackFinal(baseConfig: webpack.Configuration, options: PresetOptions) { if (!moduleIsAvailable('@angular-devkit/build-angular')) { @@ -36,6 +41,7 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P getWebpackConfig: async (_baseConfig, _options) => { const builderContext = getBuilderContext(_options); const builderOptions = await getBuilderOptions(_options, builderContext); + const legacyDefaultOptions = await getLegacyDefaultBuildOptions(_options); return getWebpackConfig13_x_x(_baseConfig, { builderOptions, @@ -124,3 +130,78 @@ async function getBuilderOptions( return builderOptions; } + +/** + * Get options from legacy way + * /!\ This is only for backward compatibility and wild be removed on Storybook 7.0 + * only work for angular.json with [defaultProject].build or "storybook.build" config + */ +async function getLegacyDefaultBuildOptions(options: PresetOptions) { + if (options.angularBrowserTarget !== undefined) { + // Not use legacy way with builder (`angularBrowserTarget` is defined or null with builder and undefined without) + return {}; + } + + logger.info(`=> TODO ~ legacy way to get default options`); + logger.info(`=> TODO ~ Add deprecation warning and ex for builder use ? `); + const dirToSearch = process.cwd(); + + // Read angular workspace + let workspaceConfig; + try { + workspaceConfig = await readAngularWorkspaceConfig(dirToSearch); + } catch (error) { + logger.error( + `=> Could not find angular workspace config (angular.json) on this path "${dirToSearch}"` + ); + logger.info(`=> Fail to load angular-cli config. Using base config`); + return {}; + } + + // Find angular project target + let project: workspaces.ProjectDefinition; + let target: workspaces.TargetDefinition; + let confName: string; + try { + const browserTarget = { + configuration: undefined, + project: getDefaultProjectName(workspaceConfig), + target: 'build', + } as Target; + + const fondProject = findAngularProjectTarget( + workspaceConfig, + browserTarget.project, + browserTarget.target + ); + project = fondProject.project; + target = fondProject.target; + confName = browserTarget.configuration; + + logger.info( + `=> Using angular project "${browserTarget.project}:${browserTarget.target}${ + confName ? `:${confName}` : '' + }" for configuring Storybook` + ); + } catch (error) { + logger.error(`=> Could not find angular project: ${error.message}`); + logger.info(`=> Fail to load angular-cli config. Using base config`); + return {}; + } + + let conf: Record = {}; + + if (confName) { + if (!target.configurations) { + throw new Error('Missing "configurations" section in project target'); + } + if (!target.configurations[confName]) { + throw new Error(`Missing required configuration in project target. Check "${confName}"`); + } + conf = target.configurations[confName]; + } + + const projectBuildOptions = { ...target.options, ...conf }; + + return projectBuildOptions; +}