fix(angular): add backwards compatibility to find options (styles) in…

… a fix structure of angular.json

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<string, unknown> = {};
+
+  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;
+}