router-outlet does not contain the components in angular 2

[rolandjitsu]

I just have a simple question, though I know that there isn't a stable version of angular 2, nor the router, but is the component supposed to be inserted inside the <router-outlet></router-outlet> or is it appended after it? The reason I ask is because I have it appended after as in the screenshot:

[ditoglez]

+1

[evanplaice]

+1 It's inserting the route contents correctly after <route-config></route-config> where it should be replacing the element.

BTW, I'm using angular2@2.0.0-alpha.44

[0x-r4bbit]

This is by design as router-outlet just marks the place where the component should be inserted.

[rolandjitsu]

@PascalPrecht thanks for clarifying. But just a thought, an outlet is something where you put a thing in not near it :) That's why I found it confusing and asked.

[0x-r4bbit]

Totally with you. In fact, router-outlet is going to be renamed to router-viewport again, which comes with the same semantic issue. However, maybe this should be considered an implementation detail

[rolandjitsu]

@PascalPrecht yeah, I think I am subscribed to that issue where the router name is being discussed on the angular 2 repo. I think that the most semantic name would be router-anchor (or router-view-anchor) if the implementation is left to add the views next to the components instead of inside.

[mattvot]

@rolandjitsu which issue is the one you are subscribed to? Thanks

[rolandjitsu]

@mattvot I cannot find the issue anymore, but I think it has been closed anyway and decided what will be the name.

[evanplaice]

@rolandjitsu Here it is angular/angular/issues/4679

[robertbrower]

I'd say that this is going to cause problems with layout if the view is inserted AFTER the element and not inside... makes it impossible to get a good layout.

[thomashilzendegen]

@robertbrower You could use the CSS "element follows element" selector:

router-outlet + your-element

[GaryChamberlain]

@thomashilzendegen The route content is inserted inside an undefined tag. The sibling selector syntax doesn't seem to work with it.

router-outlet + undefined

The contents of components are inserted into their custom tag names, so why wouldn't the same happen with router-outlet? I've seen "this is by design" in a bunch of places (many people asking about this) but no technical reason why it would be designed in such a strange way.

It's confusing and makes it difficult to layout in CSS. This really should be addressed before Angular 2 is released. Maybe it is by design, but it looks like a bug.

[GaryChamberlain]

@mhevery @btford @IgorMinar Please consider reopening this and adding it to the release candidate. It feels broken. Developers are going to need to have some funky css to layout the router-outlet content which will make it difficult to fix later.

[GaryChamberlain]

[GaryChamberlain]

I think I figured out my confusion. It's two related things.

1] The name of the tag inserted after the router-outlet comes from the routed component's selector attribute. I had followed the instructions on the Routing & Navigation page of the docs which states, "It has no selector either. It doesn't need one.", and in fact the live example inserts an undefined tag. The docs should communicate that the selector name will be used for the embedded tag name, and if it is omitted then undefined will be used. @naomiblack

2] It seems that sibling selectors don't work inside component style attributes. I was thinking that it had to do with the name undefined. However, even after I set the selector attribute and had a name, it still didn't work. When I move it to a styles.css file it works fine.

router-outlet + your-element

[Be-ngt-oH]

We've just discovered an alternative solution:

:host router-outlet + *

The trick is that only the host attribute is used and no additional attribute is added to the router-outlet and star selector. However I consider this to be a temporary workaround because I believe it should work as @GaryChamberlain wrote.

[kalyan-anna]

I wrapped the <router-outlet> in a div and it works for me

<div><router-outlet></router-outlet></div>

[robert-king]

this works, it also makes sense to wrap a div since the outlet could contain multiple top level elements:

<div style="height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;">
  <app-nav></app-nav>
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

[ShaggyDude]

Adding extra divs sux imho. Does the wildcard selector work? I think it would be ":host router-outlet > " though. EDIT: The above is correct. The adjacent sibling selector "router-outlet + " because of the strange non nested output.

[ShaggyDude]

From the parent component '::ng-deep router-outlet + *'