[storybook/angular] storybook fails because of missing "node-sass", for Angular v8.0 when `defaultProject` is a library project

Describe the bug

This is a bit complex bug. This bug is based on the following conditions;

• Storybook v5
• Angular v8.0.0
  • node-sass doesn’t exist in package.json
• In angular.json, defaultProject is set to a project which has projectType: library.
• A component (used in a story) has styleUrls and it refers external .scss files which contains @import "...".

Running yarn storybook, it fails with log like the below;

ERROR in ./projects/sample-lib/src/lib/sample-lib.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.sassLoader (/Users/laco/Works/storybook-ngv8-lib/node_modules/sass-loader/lib/loader.js:46:72)
 @ ./projects/sample-lib/src/lib/sample-lib.component.ts 15:17-55
 @ ./src/stories/index.stories.ts
 @ ./src/stories sync \.stories\.ts$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

To Reproduce Steps to reproduce the behavior:

1. `ng new some-repo --create-application false
2. ng generate library sample-lib
3. yarn add @storybook/cli
4. yarn sb init 5 Create sample-lib.component.scss file and add it to SampleLibComponent’s styleUrls
5. Create foo.scss and import it from sample-lib.component.scss
6. Create a new story for SampleLibComponent
7. yarn storybook

Repro: https://github.com/lacolaco/ngv8lib-storybook-repro

Expected behavior

Even if the defaultProject is a library, storybook should work.

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Framework: angular
• Version: [5.0]

Additional context

The problem is here;

https://github.com/storybookjs/storybook/blob/master/app/angular/src/server/angular-cli_config.js#L92

With a library project, cliParts will be null because of getAngularCliParts. Internally, it uses this function: https://github.com/storybookjs/storybook/blob/master/app/angular/src/server/angular-cli_utils.js#L53-L65

It depends on @angular_devkit/build-angular but the cliWebpackConfigOptions is defined for @angular_devkit/build_ng_packagr. It makes schema mismatching.

I think storybook should have its own default cliWebpackConfigOptions which will be used when it’s projectType is not application.

export function getAngularCliParts(cliWebpackConfigOptions) {
  // eslint-disable-next-line global-require, import/no-extraneous-dependencies
  const ngCliConfigFactory = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');

  if (cliWebpackConfigOptions.projectType !== "application") {
    cliWebpackConfigOptions = defaultCliWebpackConfigOption; // use default
  }

  try {
    return {
      cliCommonConfig: ngCliConfigFactory.getCommonConfig(cliWebpackConfigOptions),
      cliStyleConfig: ngCliConfigFactory.getStylesConfig(cliWebpackConfigOptions),
    };
  } catch (e) {
    return null;
  }
}

[owen26]

As a workaround, what you can do is:

Create a new project entry in angular.json called “storybook”,

angular.json

{
  "projects": {
    "your-app": {...},
    "your-lib": {...},
    "storybook": {
      "projectType": "application",
      "root": "copy-from-your-app",
      "sourceRoot": "copy-from-your-app",
      "architect": {
        "build": {
          "options": { ...copy from your-app }
        }
      }
    }
  },
  "defaultProject": "your-lib"
}

With this change, you basically tell storybook what’s your intended project in your multi-projects angular workspace to let storybook start/build.

[shilman]

@kroeder @MaximSagan @CodeByAlex I’m seeing this when trying to run examples/angular-cli in our monorepo. Any chance one of the angular maintainers can prioritize this?