router outlet being appended to <undefined>

I’ve just started playing with secure routes and while I’m pretty sure it’s just an out of date code issue I thought I’d raise it here. (I got the code for securing the route from https://github.com/auth0/angular2-authentication-sample)

I’ve used the following code to secure my routes (redirect to login if not logged in)

import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/core';
import {RouterOutlet, Router, ComponentInstruction} from 'angular2/router'

import {LoginComponent} from "../views/login/login.component";

@Directive({selector: 'router-outlet'})

export class SecureOutlet extends RouterOutlet {
    publicRoutes:any;
    private parentRouter:Router;

    constructor(_elementRef:ElementRef,  _loader:DynamicComponentLoader,  _parentRouter:Router,  @Attribute('name') nameAttr:String) {

        super(_elementRef, _loader, _parentRouter, nameAttr);
        this.parentRouter = _parentRouter;
        this.publicRoutes = {
            '/login':true
        }
    }

    activate(instruction: ComponentInstruction) {
        var url = this.parentRouter.lastNavigationAttempt;
        if (!this.publicRoutes[url] && !localStorage.getItem('jwt')) {
            //todo: redirect to Login, may be theres a better way?
            this.parentRouter.navigateByUrl('/login');
        }
        return super.activate(instruction);
    }
}

And here is my app.component.ts

import {Component, View} from 'angular2/core';
import {Location, RouteConfig, RouterLink, Router} from 'angular2/router';

import {DashboardComponent} from './views/dash/dashboard.component';
import {AdminComponent} from './views/admin/admin.component';
import {SettingsComponent} from './views/settings/settings.component';
import {FileBrowserComponent} from './views/filebrowser/files.component';
import {LoginComponent} from './views/login/login.component';
import {UserService} from "./Components/user.service";
import {SecureOutlet} from "./Components/secure.routeroutlet";

@Component({
    selector: 'shape-site'
})
@View({
    directives: [SecureOutlet],
    template: `<router-outlet></router-outlet>`
})
@RouteConfig([
    {path: '/', redirectTo: ['Dashboard']},
    {path: '/dashboard',        name: 'Dashboard',    component: DashboardComponent},
    {path: '/settings',         name: 'Settings',     component: SettingsComponent},
    {path: '/dashboard/admin',  name: 'Admin',        component: AdminComponent},
    {path: '/files',            name: 'FileBrowser',  component: FileBrowserComponent},
    {path: '/login',            name: 'Login',        component: LoginComponent}
])
export class AppComponent {
    constructor(public router:Router) {}
}

However while this all seems to work (Navigating to /dashboard will redirect to /login) The actual DOM is put in an <undefined></undefined> element instead of withing the <router-outlet> Giving me the following

<shape-site>
    <router-outlet></router-outlet>
    <undefined>
        <h1>Login...</h1>
    </undefined>
</shape-site>

[mswehli]

Just to get some clarification since i’m experiencing the same issue. So the issue is that angular2’s router doesn’t actually use the <router-outlet> element for the output of the routed component but instead adds a new element right after it. But you guys are all saying thats actually part of the design? And the selector is only used to set the name of the new element it is going to create, but the router-outlet element will never be used? Seems a bit flawed to me no? Would be much neater and more expected if it put the component inside the router-outlet element.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}