[Feat] Investigate changing route component to a structural directive about router

[LayZeeDK]

what would be the use-case for using display: none on route element? It does not render anything meaningful apart from being a wrapper to inner child component.

The default for custom elements is display: inline;, so there is a small cost to adding elements to the DOM, even empty elements. Angular components are hopelessly tied to the DOM. The DOM of a dynamic page gets slower the more visible elements are added because of memory consumption, render, layout, and paint.

[meeroslav]

From the ease of development and readability, I would vote for current functionality, over structural directives for router and route.

However, adding structural directives as an option would be great, unless we cripple the implementation by doing so.
I'll give it a go these days and see what comes out of it.

@LayZeeDK, @brandonroberts: what would be the use-case for using display: none on route element? It does not render anything meaningful apart from being a wrapper to inner child component.

[meeroslav]

what would be the use-case for using display: none on route element? It does not render anything meaningful apart from being a wrapper to inner child component.

The default for custom elements is display: inline;, so there is a small cost to adding elements to the DOM, even empty elements. Angular components are hopelessly tied to the DOM. The DOM of a dynamic page gets slower the more visible elements are added because of memory consumption, render, layout, and paint.

In short - DOM rendering performance. I thought there was some specific use case in mind. Thanks for the clarification.

[LayZeeDK]

Maybe it could even be a structural directive on the <router> element level, that is *router instead of <router>. This structural would be a responsible for managing the individual routed components.

<ng-container *router>
  <!-- For nested routes use exact: false -->
  <route path="/blog" [exact]="false">
    <app-blog></app-blog>
  </route>
  <route path="/posts/:postId">
    <app-post></app-post>
  </route>
  <route path="/about">
    <app-about></app-about>
  </route>
  <route path="/" redirectTo="/blog"> </route>
  <route path="/" [exact]="false">
    <app-page-not-found></app-page-not-found>
  </route>
</ng-container>

Not sure if this is possible. It would be a more complicated implementation, but it might be an easier developer experience to just apply one structural directive instead of one on each routed component.