addon-storysource not working with Angular

[dams-dev]

Describe the bug
addon-storysource not working with angular 13.1 and always display "loading source..."

To Reproduce
npm un -g @angular/cli
npm un -g @storybook/cli

npm i -g @angular/cli
npm i -g @storybook/[email protected] (angular 13.1 support added in alpha15)

ng new test-storybook (with default options)
cd test-storybook
sb init
npm i @storybook/addon-storysource --save-dev

-> update .storybook/main.js file to add "@storybook/addon-storysource" in addons

npm run storybook

open http://localhost:6006/?path=/story/example-button--primary

the "Story" panel show : loading source...

System
Windows npm 6.14.14

[jkirch57]

Hello,

I'm having the same issue, could we have some feedback on it ?

Regards.

[Silvere112]

Hello,

I have the same issue

[Stusaw]

Same issue here aswell. I have also tried adding @storybook/source-loader and configuring webpack, still no luck?

module.exports = {
  stories: [],
  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y',
    {
      name: '@storybook/addon-storysource',
      options: {
        rule: {
          test: [/\.stories\.ts?$/]
        },
        loaderOptions: {
          prettierConfig: { printWidth: 80, singleQuote: false },
        },
      },
    },
  ],
  staticDirs: [{ from: "./public", to: "assets" }],
  // uncomment the property below if you want to apply some webpack config globally
  webpackFinal: async (config, { configType }) => {
    // Make whatever fine-grained changes you need that should apply to all storybook configs
    config.module.rules.push({
      test: /\.stories\.ts?$/,
      use: [
        {
          loader: require.resolve('@storybook/source-loader'),
          options: { parser: 'typescript' },
        },
      ],
      enforce: 'pre',
    });

    // Return the altered config
    return config;
  },
};

[ydmitry]

The same issue

[nategreen]

Same issue here, with Angular 12. Also, another odd thing, the source shown in the DocsPage works fine. 🤔 Is that what everyone else is seeing?

[SarcevicAntonio]

We are also having this issue.
Using Angular 13 and 6.4.18 of addon-storysource.

[while1618]

Had the same problem, updating addon-storysource to 6.4.19 fix it for me.

[sir-captainmorgan21]

I am having the same issue.

[netdjw]

+1

[stirelli]

Also here
Angular 13.3

[ipo-api]

+1

[dimamarksman]

+1

[CarstenTornow]

+1
SB: 6.5
NG: 13.3

[HyperLife1119]

+1

[mmasterson-extron]

+1
NG: 13.3.6s
SB 6.5.9
storysource: 6.5.9
Webpack 5

[JijiyaT]

Hi Team,

Even after tried the workaround mentioned in https://storybook.js.org/addons/@storybook/addon-storysource.
Still we are facing this issue.

Do we have any other add ons which can be used to check the source code.

Thanks.

[certainlyakey]

Not working with Storybook 6.5.10 and Angular 14 too.

[dpeese]

@shilman Could you please help us here? Even with 6.5.10 we are facing same issue.

[Akshat55]

Also ran into this issue in Angular 12 with [email protected].

What I found interesting was that when running start-storybook directly from package.json, the story source loaded correctly.

But there were some complications, styles didn't load for me (I don't use styles.scss to add styles, I use preview.scss for my use case).

If I want to have styles working, I need to start/build via script in angular.json architect object & is the approach used in documentation.

...
"scripts": {
    "storybook": "start-storybook -p 3000" // Loads story source, but not styles
    "ng-storybook": "ng run project:storybook" // Loads styles, but not story source
}
...

[maertz]

Doesn't work with angular 14 either. After some deeper dive it looks like "storySource" is not available within the state of storybook from where it tries to pull the "locationMap". Tried to fix it but with no luck.

[byjokese]

Same problem, tried several configs and options for the loader.

• NX workspace 15.0.1
• Angular 14.2.0
• @storybook/addon-storysource: 6.5.12

[vinod-amt]

facing the same in angular 16 version.

[alexcza]

I have the same issue
Angular 16
@storybook/addon-storysource 7.4.5

[obar-zik]

Same issue:
Angular 16, @storybook/addon-storysource 7.4.5

[breity]

+1

Just wondering if a fix is planned for this. Sad that @storybook/addon-storysource doesn't work with Angular. Thanks!

[Moutah]

Same issue
Angular 14, @storybook/addon-storysource 7.5.2

[RomainFALLER]

Same with angular 15...
Is Storybook still maintened ? Looks really weird that a such important addon like storysource is not working for angular...

@JijiyaT did you find out a way to show source code ?

[valentinpalkovic]

I will try to find some time to finalize #24660 which should fix the issue.