feat(storybook): use build-storybook as a build target for all libs (#9651)

packages/storybook/src/executors/utils.ts

@@ -321,10 +321,17 @@ export function findStorybookAndBuildTargets(targets: {
     if (targetConfig.executor === '@nrwl/storybook:build') {
       returnObject.storybookBuildTarget = target;
     }
-    if (
-      targetConfig.executor === '@angular-devkit/build-angular:browser' ||
-      targetConfig.executor === '@nrwl/angular:ng-packagr-lite'
-    ) {
+    /**
+     * Not looking for '@nrwl/angular:ng-packagr-lite', only
+     * looking for '@angular-devkit/build-angular:browser'
+     * because the '@nrwl/angular:ng-packagr-lite' executor
+     * does not support styles and extra options, so the user
+     * will be forced to switch to build-storybook to add extra options.
+     *
+     * So we might as well use the build-storybook by default to
+     * avoid any errors.
+     */
+    if (targetConfig.executor === '@angular-devkit/build-angular:browser') {
       returnObject.buildTarget = target;
     }
   });

packages/storybook/src/generators/configuration/configuration.spec.ts

@@ -225,6 +225,46 @@ describe('@nrwl/storybook:configuration', () => {
     });
   });
 
+  it('should update workspace file for angular buildable libs', async () => {
+    // Setup a new lib
+    await libraryGenerator(tree, {
+      name: 'test-ui-lib-5',
+      standaloneConfig: false,
+      buildable: true,
+    });
+    await configurationGenerator(tree, {
+      name: 'test-ui-lib-5',
+      uiFramework: '@storybook/angular',
+      standaloneConfig: false,
+    });
+    const project = readProjectConfiguration(tree, 'test-ui-lib-5');
+
+    expect(project.targets.storybook).toEqual({
+      executor: '@nrwl/storybook:storybook',
+      configurations: {
+        ci: {
+          quiet: true,
+        },
+      },
+      options: {
+        port: 4400,
+        projectBuildConfig: 'test-ui-lib-5:build-storybook',
+        uiFramework: '@storybook/angular',
+        config: {
+          configFolder: 'libs/test-ui-lib-5/.storybook',
+        },
+      },
+    });
+
+    expect(project.targets.lint).toEqual({
+      executor: '@nrwl/linter:eslint',
+      outputs: ['{options.outputFile}'],
+      options: {
+        lintFilePatterns: ['libs/test-ui-lib-5/**/*.ts'],
+      },
+    });
+  });
+
   it('should update `tsconfig.lib.json` file', async () => {
     await configurationGenerator(tree, {
       name: 'test-ui-lib',