CODEWITHSUNDEEP
angularangular4-router
Venkata Mahesh P
Venkata Mahesh P

Reputation: 95

Redirecting to another path instead of given in angular 4

App routes:

[
    { path: '', loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard] },
    { path: 'login', loadChildren: './login/login.module#LoginModule' },
    { path: 'dashboard', loadChildren: './layout/layout.module#LayoutModule' },
    { path: 'error', loadChildren: './server-error/server-error.module#ServerErrorModule' },
    { path: 'access-denied', loadChildren: './access-denied/access-denied.module#AccessDeniedModule' },
    { path: 'not-found', loadChildren: './not-found/not-found.module#NotFoundModule' },
    { path: '**', redirectTo: 'not-found' }
]

LayoutModule Routes:

   [{
        path: '',
        component: LayoutComponent,
        children: [
            { path: '', redirectTo: 'dashboard' },
            { path: 'allcookies' , loadChildren: './allcookies/allcookies.module#AllcookiesModule' },
            { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
            { path: 'details', loadChildren: './details/details.module#DetailsModule' },
            { path: 'domains', loadChildren: './domains/domains.module#DomainsModule' },
        ]
    }]

I have DetailsModule routes coniguration like this,

[
  { path : '' , redirectTo: 'email-details' },
  { path : 'email-details' , component : EmailDetailsComponent },
  { path : 'email-details/:email_id' , component : EmailDetailsComponent },
  { path : 'email-details/:email_id/:curr_page' , component : EmailDetailsComponent },
  { path : 'fingerprint-details/:fp_id/:fp_page/domains/:user_id/:domain_page' , component : FingerprintDetailsComponent },
  { path : 'fingerprint-details/:fp_id/:fp_page/domains/:user_id' , component : FingerprintDetailsComponent },
  { path : 'fingerprint-details/:fp_id/:fp_page' , component : FingerprintDetailsComponent },
  { path : 'fingerprint-details/:fp_id' , component : FingerprintDetailsComponent },
  { path : 'fingerprint-details' , component : FingerprintDetailsComponent }
]

I have given url

http://localhost:4302/details/fingerprint-details

But it os redirecting to

http://localhost:4302/details/email-details/fingerprint-details

Upvotes: 0

Views: 366

Answers (2)

Quentin Fonck
Quentin Fonck

Reputation: 1315

In the redirectTo property, you should write the absolute path from the route level. I also always use pathMatch: 'full' in all of my routes to be sure I will not have relative path involved.

Test it with that configuration:

[
  { path : '' , redirectTo: '/email-details', pathMatch: 'full'},
  { path : 'email-details' , pathMatch: 'full', component : EmailDetailsComponent },
  { path : 'email-details/:email_id' , pathMatch: 'full', component : EmailDetailsComponent },
  { path : 'email-details/:email_id/:curr_page' , pathMatch: 'full', component : EmailDetailsComponent },
  { path : 'fingerprint-details/:fp_id/:fp_page/domains/:user_id/:domain_page' , pathMatch: 'full', component : FingerprintDetailsComponent },
  { path : 'fingerprint-details/:fp_id/:fp_page/domains/:user_id' , pathMatch: 'full', component : FingerprintDetailsComponent },
  { path : 'fingerprint-details/:fp_id/:fp_page' , pathMatch: 'full', component : FingerprintDetailsComponent },
  { path : 'fingerprint-details/:fp_id', pathMatch: 'full', component : FingerprintDetailsComponent },
  { path : 'fingerprint-details' , pathMatch: 'full', component : FingerprintDetailsComponent }
]

Here's the corresponding link to the doc: https://angular.io/guide/router#redirecting-routes

Upvotes: 1

jamesbcn
jamesbcn

Reputation: 347

Quentin beat me to it.

https://angular.io/guide/router

"A redirect route requires a pathMatch property to tell the router how to match a URL to the path of a route. The router throws an error if you don't."

Upvotes: 0

Related Questions