Storybook: Blank page in Angular storybook

[ildar-icoosoft]

Describe the bug
I get blank page in Angular storybook. I'm using Ionic framework.

To Reproduce
Steps to reproduce the behavior:

1. install Ionic: ionic start myApp blank
2. install storybook: npx -p @storybook/cli sb init --type angular
3. run storybook: npm run storybook
4. canvas tab is empty (see attached screenshot)

Please specify which version of Storybook and optionally any affected addons that you're running

"@storybook/addon-actions": "^5.1.10",
"@storybook/addon-links": "^5.1.10",
"@storybook/addon-notes": "^5.1.10",
"@storybook/addons": "^5.1.10",
"@storybook/angular": "^5.1.10",
 "@angular/cli": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/compiler-cli": "~8.1.2",
"@angular/language-service": "~8.1.2",
"@babel/core": "^7.5.5",

I found out that components are hidden because of CSS in storybook:

html:not(.hydrated) body {
    display: none;
}

There is no HTML class "hydrated" in html tag in storybook iframe

I get an error in console:
The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type" in iframe.vendors~main.7bfb22a46d79733eaf20.bundle.js:617

[ildar-icoosoft]

it was Ionic CSS:

html:not(.hydrated) body {
    display: none;
}

So I need just override this CSS in storybook

[Alfr3d]

Hi @ildar-icoosoft ,

so how should I solve?

[bubbleupdotnet]

hi @Alfr3d
I added css to storybook.

in index.stories.ts:

...
import "!style-loader!css-loader!./styles.css";
...

in styles.css:

html:not(.hydrated) body {
  display: block !important;
}

[chawax]

With newer versions of Storybook I added the import statement in ./storybook/preview.js file instead of index.stories.ts to make it work because with the new configuration it has no more index file but uses a pattern to look for stories.