CODEWITHSUNDEEP
angularangular2-routingtypescript1.8
Ravinder Kumar
Ravinder Kumar

Reputation: 752

Angular2 component initializing two times during routing

Let me make you familiar with my code first and then the issue I am facing. Below is the code of my main routing app.routes.ts:

export const routes: RouterConfig = [
    ...LoginRoutes,
    ...DashboardRoutes,
    {path:'dashboard', component: DashboardComponent, canActivate:[AuthGuard]}
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes), [AuthGuard,AuthService, CanDeactivateGuard]
];

DashboardRoutes looks like:

export const DashboardRoutes = [
{
    path:'dashboard',
    component: DashboardComponent,
    children:[
        {path:'New', component:NewData, canActivate:[AuthGuard], canDeactivate:[CanDeactivateGuard]},
        {path:'SavedData', component:SavedData, canActivate:[AuthGuard]},
        {path:'NewIncentive', component:NewIncentive, canActivate:[AuthGuard]}
    ],
    canActivate:[AuthGuard]
}
];

Now when I navigates to the dashboard page, my dashboard component initializes, which is absolutely fine. But if I navigates on any child route component of dashboard, dashboard component initializes again; once only. My second concern is that when I am already declaring Route for Deshbaord component in DashboardRoutes then why I need to declare it again in app.routes.ts? If I removes its declaration from app.routes.ts, it doesn't work. Any help is appreciated.

Upvotes: 0

Views: 1601

Answers (2)

Ravinder Kumar
Ravinder Kumar

Reputation: 752

So finally I got the answer after doing some R&D.

Everyone of your were right who asked me to remove 

{path:'dashboard', component: DashboardComponent, canActivate:[AuthGuard]}

but If I was removing this line I was getting error: Error: Cannot match any routes: 'dashboard.'

It is because when route goes to http://localhost:3000/dashboard, it looks for further redirection string because we I have declared dashoard's children. When route don't find any string to redirect further and don't find anything for blank path it was throwing error. To resolve this issue I need to make one more Route entry for blank path in DashboardRoutes, and after changes, it looks like: 

 export const DashboardRoutes = [
{
    path:'dashboard',
    component: DashboardComponent,
    children:[
        {path:''},
        {path:'New', component:NewData, canActivate:[AuthGuard], canDeactivate:[CanDeactivateGuard]},
        {path:'SavedData', component:SavedData, canActivate:[AuthGuard]},
        {path:'NewIncentive', component:NewIncentive, canActivate:[AuthGuard]}
    ],
    canActivate:[AuthGuard]
}
];

I got the idea to resolve this from https://plnkr.co/edit/QlMe6pMINxJGTdA3xm0B?p=preview

So idea behind the solution is, If there is some component with some child routing component, an entry in children array need to be made for blank path too.

I appreciate your help. Feel free to ask any question.

Upvotes: 0

Akshay Rao
Akshay Rao

Reputation: 3544

Your dashboard component is being loaded twice because u have declared two times in your application ,once in app.routes and secondly in dashboard routes ... just declare it in dashboardroutes only and provide its link in app.routes as ..

export const routes: RouterConfig = [ ...LoginRoutes, ...DashboardRoutes];

export const APP_ROUTER_PROVIDERS = [ provideRouter(routes), AuthGuard,AuthService, CanDeactivateGuard ]

this will resolve your both issues..

if still u got any query let us know :)

Upvotes: 1

Related Questions