CODEWITHSUNDEEP
angularangular2-routing
medhatdawoud
medhatdawoud

Reputation: 1188

Angular 2 Routing always redirect to root path

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

Upvotes: 9

Views: 16405

Answers (4)

Alex Egli
Alex Egli

Reputation: 2064

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}
    ]
}]

Upvotes: 1

Richard Strickland
Richard Strickland

Reputation: 1841

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?

Upvotes: 10

Ha Hoang
Ha Hoang

Reputation: 1684

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!

Upvotes: 3

Lucas T&#233;treault
Lucas T&#233;treault

Reputation: 953

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}
    ]
}]

Upvotes: 1

Related Questions