CODEWITHSUNDEEP
angularangular2-templateangular4-router
mpunit30
mpunit30

Reputation: 391

Lazy load module with Router Guard with dynamic routes in Angular4

I have single lazy load module with multiple components having dynamic routes each component define by router guard.So how to configure routes for each component having dynamic routes . For every route path i am able to see the same component and when i route manually using url am getting error "Guard is not a function".

Below is my code: mycomponent.module.ts

@NgModule({

    imports: [
        routing,
        SharedModule,
        CommentsModule,
    ],
    declarations: [
                    MyComponent1,
                    MyComponent2,
                    MyComponent3,
                    MyComponent4,
                    MyComponent5,
    ],
    providers: [mycomponentService]

})
export class MyComponentModule { }

mycomponent.routing.ts

const routes: Routes = [
    {
        path: '',
        canActivate: [AuthGuard],
        canActivateChild: [AuthGuard],
        children: [
            { path: '/my-todos', component: MyComponent1 },
            { path: '/edit-my-todo/:tid', component: MyComponent2 },
            { path: '/edit-my-todo/single-todo/:tid', component: MyComponent2 },
            { path: '/edit-my-todo/multi-todo/:tid', component: MyComponent2 },
            { path: '/add-todo', component: MyComponent3 },
            { path: '/multiple-todo-details/:tid', component: MyComponent4 },
            { path: '/todo/:alias', component: MyComponent5 },
            { path: '/todo-preview/:tid', component: MyComponent5 },
        ]
    },
];

app.routing.ts

 {
    path: '', 
    loadChildren:'app/mycomponent/mycomponent.module#MyComponentModule'   
};

How to configure routes for this dynamic routes, even I am facing error of gaurd is not a function. Does anyone know how to configure routes for above. Does anyone face the same issue before. Any help would be great help. Thank you in advance for the help.

Upvotes: 0

Views: 1815

Answers (1)

mpunit30
mpunit30

Reputation: 391

I figured out, the way of configuring the routes. Hope this helps someone in future

mycomponent.routing.ts

     const routes: Routes = [
        { path: 'my-todos', component: MyComponent1 },
        { path: 'edit-my-todo/:tid', component: MyComponent2 },
        { path: 'edit-my-todo/single-todo/:tid', component: MyComponent2 },
        { path: 'edit-my-todo/multi-todo/:tid', component: MyComponent2 },
        { path: 'add-todo', component: MyComponent3 },
        { path: 'multiple-todo-details/:tid', component: MyComponent4 },
        { path: 'todo/:alias', component: MyComponent5 },
        { path: 'todo-preview/:tid', component: MyComponent5 },

];

app.routing.ts

 {
       path: '',
       canActivate: [AuthGuard],
       canActivateChild: [AuthGuard],
       children: [
                   { path: '',
                     loadChildren: 
                     'app/mycomponent/mycomponent.module#MyComponentModule' 
                   },
                ],
  }

This is working fine and works well.

Upvotes: 2

Related Questions