router-outlet works incorrect

Question

Component that loading Router is rendering outside router-outlet app.component.ts

@Component({
    selector  : "body",
    template  : `<router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: "/auth/login", name: "Auth", component: AuthComponent},
    {path: "/...", name: "Default", component: DefaultComponent}
])
export class AppComponent {
    constructor(private _router: Router) {
    }
}

default.component.ts

@Component({
    template  : `
    <header-view></header-view>
    <router-outlet></router-outlet>
`,
    directives: [HeaderComponent, ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: "/", name: "LevelsList", component: LevelListComponent, useAsDefault: true}
])
export class DefaultComponent {
    constructor(private _router: Router) {}
}

Console has no error. While inspecting an element I see that router-outlet is empty and component is rendering after it.

The fact that child route content renders below the closing tag was driving me nuts, as it doesn't seem to be documented or discussed anywhere but here. Thank you for asking, and thank you @Gunter for the answer. This question is still very difficult to find in Google results. How can we increase visibility? — jcairney, Mar 07 '18 at 21:29

score 3 · Accepted Answer · answered May 11 '16 at 17:01

3

This is by design. There is a related open issue https://github.com/angular/angular/issues/8529 but I didn't get the impression this is something that is considered for being changed.

answered May 11 '16 at 17:01

Günter Zöchbauer

623,577
216
2,003
1,567

Then why I have an undefined element? – Illorian May 11 '16 at 17:09
1

AFAIK this is when your component doesn't have a `selector: 'xxx'` – Günter Zöchbauer May 11 '16 at 17:10
Works fine. Thanks – Illorian May 11 '16 at 17:17

router-outlet works incorrect

1 Answers1