Storybook composition is loading forever in Angular + Nx app

Question

I have a Nx monorepo with some Angular libs, and I'm trying to get Storybook composition to work. I have two different Storybooks, one running at http://localhost:9001, and the other at http://localhost:9002.

I can run them separately, I can build them, but when trying to run them both for composition, what I get is no errors on the console, and infinite loading.

Here is my composition setup ( .storybook/main.js ):

module.exports = {
  core: { builder: 'webpack5' },
  stories: [],
  addons: ['@storybook/addon-essentials', '@storybook/addon-knobs', '@storybook/addon-a11y'],
  features: {
    buildStoriesJson: true,
  },
  refs: {
    'designsystem-core': {
      title: 'Design System Core',
      url: 'http://localhost:9001',
    },
    'designsystem-demo': {
      title: 'Design System Demo',
      url: 'http://localhost:9002',
    },
  },
}

I'm running them both using separate terminals, with the command nx run name:storybook . Both of them have been built and have generated stories.json inside their respective dist folders.

And I'm using @nrwl/storybook version 13.7.3 and @storybook/angular version 6.4.13

Does anyone know what's going on?

Answer 1

The problem maybe your routing, for example if you use this ts { path: '**', pathMatch: 'full', redirectTo: '' } or any route in the wrong place the result is forever loading because don't find the route.