How to redirect wildcard route by condition in angular routing module

Question

Is there the way to handle redirect route when user type the wrong URL using wildcard but control by condition?

My project have 3 main modules separately, and every each one of them have some condition that can only access by user's roles.

the problem is i don't know how to handle it by condition, i've tried canActivate but it doesn't work

main.ts:14 Error: Invalid configuration of route '**'. One of the following must be provided: component, redirectTo, children or loadChildren

Here some of my code.

const routes: Routes = [
{
    path: '',
    pathMatch: 'full',
    redirectTo: 'customer1'
},
{
    path: 'customer1',
    component: RootOneComponent,
    children: [
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'home'
        },
        {
            path: 'home',
            component: HomeOneComponent
        },
        {
            path: '**',
            component: PageNotFoundComponent
        }
    ],
},
{
    path: 'customer2',
    component: RootTwoComponent,
    children: [
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'home'
        },
        {
            path: 'home',
            component: HomeTwoComponent
        },
        {
            path: 'BlogPicture',
            loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule)
        },
        {
            path: '**',
            component: PageNotFoundComponent
        }
    ],
},
{
    path: 'customer3',
    component: RootThreeComponent,
    children: [
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'home'
        },
        {
            path: 'home',
            component: HomeThreeComponent
        },
        {
            path: 'blog-price',
            loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule)
        },
        {
            path: '**',
            component: PageNotFoundComponent
        }
    ],
},
 // wild card condition is there the way to manage this?
{
    path: '**',
    redirectTo: 'classic'
}

];

Wasim Wasim · Accepted Answer · 2020-03-03T07:42:28

In your app.routing.module.ts

const routes: Routes = [{
    path: "customer1",
    component: FirstCustomerModule,
    pathMatch: "full"
  },
  {
    path: "customer2",
    data: { preload: true },
    loadChildren: () => SecondCustomerModule
  },
  {
    path: "customer3",
    data: { preload: true },
    loadChildren: () => ThirdCustomerModule
  }
}

path defines you mentioned path and in module you have to mention that mentioned module will be hit . Then in your Modules you have to relatively mention path , I have mentioned just app level routing , then you can further implement module level routing , Load Children tells our app that it is a module and it have further components

How to redirect wildcard route by condition in angular routing module

1 Answers