The page displays basic markup, a convenient message, and a loading indicator.
<html> ... <body app> ...page layout and loading stuff... </body> </html>
And the root component
@Component({ selector: 'body[app]', template: `<ng-content></ng-content>` }) App {}
The plunker that demonstrates the problem is here .
After initializing the SPA, it is assumed that it loads the body element and compiles the components while maintaining the existing main layout.
However, the root component simply ignores ng-content .
This leads to two options. The initial layout should be reset and shown only after the initial loading. Or it should be duplicated both in the root component template and in the HTML document (probably with server-side templates). None of them look good enough.
body contains sensitive markup that cannot simply be wrapped in a child component to overcome this limitation. I intend to use Angular Universal to provide SPA with a static preview, but not at this point.
This seems to be a known issue, but I cannot find a workable solution.
How can this be fixed?
estus source share