5
votes

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:)

5

5 Answers

4
votes

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

  1. 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.

6
votes

in RC1 what works for me is

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

3
votes
@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 '*'

0
votes

One way to define a default routes with the new RC router is

@Routes([
    { path: '/',  component: Login }
])
0
votes
@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: 'login', component: LoginComponent },
            { path: '', component: LoginComponent },/*default*/
            { path: '**', component: PageNotFoundComponent }/*matches all*/
        ])
    ],
    exports: [
        RouterModule
    ]
})

The empty path in the 2nd route matches as the default path for each level of routing. It also allows for adding routes without extending the URL path.

The ** in the last route denotes a wildcard path for our route. The router will match this route if the URL requested doesn't match any paths for routes defined in our configuration. This is useful for displaying a 404 page or redirecting to another route.

The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. https://angular.io/docs/ts/latest/guide/router.html