Angular 2 Routing always redirect to root path

Question

I'm using Angular 2 rc4 and I've used the new routing like this

const routes: RouterConfig = [{
    path: '',
    component: PublicLayoutComponent,
    children: [
        { path: '', component: HomeComponent},
        { path: 'login', component: LoginComponent}
    ]
}]

for this code i cannot access the route /login I just want to know what's wrong it's always redirect to the root, please help

Solution 1

This is an old thread - but no answer yet. If it helps anybody - I found that for my case by adding this to the RouterModule.forRoot options:

RouterModule.forRoot(appRoutes,
      { enableTracing: true } // <-- debugging purposes only
)

Angular.io router docs

I then found that a nested component was throwing an exception. After fixing, my routing worked. What was happening was that the routing was working it was just blowing up when it reached the load of that 1 component so angular just quits the page load and defaults to base URL. This is presumably for security reasons in case your failing component is affecting in page security?

Solution 2

Angular Cannot match any routes: 'login'. Please have a look at tree as below:

                                  App
                                  /\
                                 /  \
                            Private Public
                                      /\
                                     /  \
                                   Home Login

Then the code look like:

export const routes: RouterConfig = [
  { path: '', redirectTo: 'public', pathMatch: 'full' },
  { path: 'private', component: PrivateComponent },
  { path: 'public', component: PublicComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent},
      { path: 'login', component: LoginComponent}
    ]
  }
];

Hope this help!

Solution 3

You have the generic path '' as the first element, but you do not have pathMatch set to full, so that path matches everything. Based on current angular router config it will find the first match in the routes list and send the user there, in this case '' will match everything so it always just goes there and doesn't bother going further down the routes list. See the documentation here: https://angular.io/guide/router#configuration

I think you should have:

const routes: RouterConfig = [{
    path: '',
    component: PublicLayoutComponent,
    children: [
        { path: '', component: HomeComponent, pathMatch: 'full'},
        { path: 'login', component: LoginComponent}
    ]
}]

Solution 4

I think the problem might be that the root path (PublicLayoutComponent) and the first child (HomeComponent) have the same path.

ie: Which component do you expect to see when you navigate to http://localhost:4200/

Try changing it to this to see if it works?

const routes: RouterConfig = [{
    path: '',
    component: PublicLayoutComponent,
    children: [
        { path: 'home', component: HomeComponent},
        { path: 'login', component: LoginComponent}
    ]
}]

View more solutions

Comments

[LeOn - Han Li]

This is great info. The enableTracing is quite useful. Do you aware anyway to make it dynamic? meaning true when dev and false when build prod. Thanks!

[Zymotik]

@Leonli using environments files? RouterModule.forRoot(routes, { enableTracing: !environment.production })