Empty page after installing Angular Playground into an Ionic 4 project
The problem is in a rule coming from Ionic stylesheets you've included as part of the global.scss
. If you inspect the body
element in browser you'll see it has the following rule attached to it:
html:not(.hydrated) body {
display: none;
}
This is a rule related to hydration which serves no purpose when using Angular Playground so it can simply be overridden by adding a third stylesheet as src/playground.scss
with the following content:
html:not(.hydrated) body {
display: block;
}
Then add this on top of the ones already in angular.json
for the Playground project:
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
{
"input": "src/playground.scss"
}
],
Now, if you restart the npm run playground
it should render the normal Playground page with component selector.
I've also covered this more thoroughly in a blog post.