angular2 rc1 default route issue when refresh page

Question

In RC1's new router the useAsDefault can no longer be used. Instead the default route now is implemented in app.component.ts via

  ngOnInit() {
    this.router.navigate(['/login']);
  }

If I refresh my page by pressing the Reload button on the browser, then my current page url, for example, http://localhost:3000/heroshell/heroes will be changed to http://localhost:3000/login because each time I hit Reload button it will go through app.component.ts

  ngOnInit() {
    this.router.navigate(['/login']);
  }

My current page will still be displayed, but with a error.

browser_adapter.ts:78 EXCEPTION: Error in app/apps/hero/hero-shell.component.html:3:7
browser_adapter.ts:78 ORIGINAL EXCEPTION: TypeError: Cannot read property 'map' of null

Here is app/apps/hero/hero-shell.component.html

<my-app1>
<h1>{{title}}</h1>
<nav>
    <a [routerLink]="['dashboard']">Dashboard</a>
    <a [routerLink]="['heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
</my-app1>

So my questions are

1. What is "property 'map' of null" is referred to?
2. Is there any way to make a default route without going through ngOnInit()?
3. Or how to resolve this URL and page content inconsistency during page reload?

Beta routing does not have such behavior because there is no need to go through ngOnInit() to define a default route.

For further info on my folder structure and route setup, see Angular2 RC1 child routes defined but not recognized

Update: If I use

  { path: '/', component: Login }, 

paired with

  ngOnInit() {
    this.router.navigate(['/']);
  }

Then the URL will be changed to http://localhost:3000/ when the reload button is hit and the error remains the same.

Same way, if I change the path to '' with the above update then when reload button is hit the URL will be changed to 'http://localhost:3000/' and the error remains the same.

The key to resolve the problem is the use of a combination of 2 things:

1. Define the root path using either '/' or '*' in @Routes in app.component.ts

   { path: '*', component: Login },

2. Get rid of ngOnInit() in app.component.ts so that it won't change the URL.

Again, thanks for the input from you all. cheers:)

Answer 1

in RC1 what works for me is

{ path: '', component: FooComponent, index: true } { path: 'foo', component: FooComponent }

Answer 2

Sorry, didn't understand 1st and 3rd questions, but for this:

2. Is there any way to make a default route without going through ngOnInit()?

have you tried '*' as a default route?

{ path: '/heroshell', component: HeroShellComponent },
{ path: '/home',  component: HomeComponent },
{ path: '/login', component: Login }, 
{ path: '*', component: Login }, 

default route will be 'Login' and '/login' path will also work.

Answer 3

@Routes([

   { path: '/', component: HomeComponent },

   { path: '/about', component: AboutComponent }
])

Out of these two component, the Homecomponent will be the default one.

UPDATE TO RC5

With RC5 you cannot have '/' in your path. Instead use ' ' or use '*'