Angular 2 routing always redirects to root path

Question

I am using Angular 2 rc4 and I used a new routing like this

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

for this code I can’t access the route /loginI just want to know what is wrong, it always redirects to the root, please help

Answer 1

Angular Unable to map routes: 'login'. Look at the tree as shown below:

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

Then the code looks like this:

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!

Answer 2

This is an old thread, but there is no answer yet. If this helps someone - I found this for my case by adding this to the parameters of RouterModule.forRoot:

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

Angular.io router docs

, . . , , , 1 , angular URL. , , ?

Answer 3

, , (PublicLayoutComponent) (HomeComponent) .

.. http://localhost:4200/

, , ?

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

Answer 4

You have a common path '' as the first element, but you do not have the pathMatch set installed, so the path matches all. Based on the current configuration of the angular router, it will find the first match in the list of routes and send the user there, in this case '' will match everyone, so he always just goes there and does not worry about moving further along the list of routes. See the documentation here: https://angular.io/guide/router#configuration

I think you need:

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