How to setup the Angular Routing

Question

Here is my work.

I set up a guard to forward the request URI /admin to /login, you may refer /admin/admin.guard.ts for detail.

It works fine. However, when the request URI is /admin/abc, it does not work.

The following is the /admin/admin-routing.module.ts content:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminGuard } from './admin.guard';
const routes: Routes = [
  {
    path: 'admin',
    canActivate: [AdminGuard],
    component: AdminComponent,
    children: [
      {
        path: '',
        redirectTo: 'admin',
        pathMatch: 'full'
      },
      {
        path: '**',
        redirectTo: 'admin',
        pathMatch: 'full'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

How can I fix the problem?

Marlon360 · Accepted Answer · 2019-10-21 10:04:06Z

1

Use absolute paths for the redirect:

const routes: Routes = [
{
  path: 'admin',
  canActivate: [AdminGuard],
  component: AdminComponent,
  children: [
    {
      path: '',
      redirectTo: '/admin',
      pathMatch: 'full'
    },
    {
      path: '**',
      redirectTo: '/admin',
      pathMatch: 'full'
    }
  ]
}
];

If you use relative paths there would be an infinite loop of redirects. From /admin/123 to /admin/admin to /admin/admin and so on.

edited Oct 21, 2019 at 10:04

answered Oct 21, 2019 at 9:56

Marlon360

861 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yajnesh Rai · Accepted Answer · 2019-10-21 09:59:49Z

You may want to check the order in which you have registered your custom angular modules under imports in app.module.ts. Make sure the module that contains a route entry for { path: '**', ... } is listed at the end, after other modules.

For e.g in your case, keep adming AdminRoutingModule at the end in the app.module.ts:

@NgModule({
  declarations: [ ... ]
  imports: [
   // Angular in-built modules
   // Your custom modules
   AdminRoutingModule
  ],
  providers: [ ... ],
  entryComponents: [ ... ],
  bootstrap: [ AppComponent ]
})

** indicates the final option for url to be redicted when no matches found with exisiting routes registred with application. Also consider using absolute path in redirectTo property like /admin.

So I'm not sure if this will help with your problem, but worth giving it a try!

Collectives™ on Stack Overflow

How to setup the Angular Routing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related