6

The page shows basic markup, comforting message and loading indicator.

<html>
...
<body app>
...page layout and loading stuff...
</body>

</html>

And root component is

@Component({
  selector: 'body[app]',
  template: `<ng-content></ng-content>`
})
App {}

A plunker that demonstrates the problem is here.

After SPA initialization it is supposed to bootstrap body element and compile components while saving existing basic layout.

However, root component just ignores ng-content.

This leads to two options. The initial layout should be dumped and shown only after bootstrapping. Or it should be duplicated in both root component template and HTML document (likely with server-side templating). None of them looks good enough.

body contains sensitive markup that cannot be just wrapped into child component to overcome this limitation. I intend to use Angular Universal to provide SPA with neat static preview, but not at this stage.

It looks like it is a known problem but I'm unable to find a workable solution.

How can it be fixed?

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • @GünterZöchbauer The supposed duplicate contains outdated answers which I don't find satisfying. Things have changed, and I was hoping that there is a better answer, not without a reason. – Estus Flask Nov 21 '16 at 18:18
  • What do you mean with "not without a reason". I'm not aware of any changes regarding to this question. – Günter Zöchbauer Nov 21 '16 at 18:22
  • @GünterZöchbauer Despite the title (possibly inaccurate), this isn't RTM question and not a duplicate, the question is not why this happens but how to achieve the desired behaviour. I'm not happy with [this](http://stackoverflow.com/a/35444285/3731501) solution and would like to know if there are more idiomatic approaches that possibly involve hacking core A2 providers and don't require Universal. Dupe question has already got a fair answer. This one has not. – Estus Flask Nov 21 '16 at 20:07
  • It's still the same question as http://stackoverflow.com/questions/32568808/angular2-root-component-with-ng-content even if you want a different anseer but it's not that important. – Günter Zöchbauer Nov 21 '16 at 20:10
  • @GünterZöchbauer Thanks. I can remove the part that mentions `ng-content` entirely if this helps to get the gist of it, though this would make the context of the question less obvious. – Estus Flask Nov 21 '16 at 20:21

2 Answers2

5

The link below has been given the status fixed by ivy. Ivy is a milestone for angular v7.0.

Transcludes are not supported on the root element, you can't pass anything to it because index.html isn't part of angular. If you can't embed the html within another component then I wouldn't expect it to work with ng-content either.

From https://github.com/angular/angular/issues/1858#issuecomment-207993202

Components only work as components when referenced in the template of another component, yet they are expected to be used outside of this which causes confusion

Clint
  • 2,696
  • 23
  • 42
0

Using <ng-content> in root component planned to be implemented.

https://github.com/angular/angular/issues/4946

ET-CS
  • 6,334
  • 5
  • 43
  • 73