Angular2 Component getting loaded 2 times after redirection

[Navaneetha Krishnan S]

I am facing the issue of a angular2 component "Home" loads 2 times after being redirected from the Login component after user authentication. Please find the details about the components and routing below

I have a Login component which is part of the the LOGIN_ROUTER_PROVIDERS. LOGIN_ROUTER_PROVIDERS consits of following routes

const loginRoutes: Routes = [
        { path: '', component: Login },
        { path: 'login', component: Login },
        { path: 'Home', component: Home, pathMatch: 'full' },
        ...HOME_ROUTER_PROVIDERS
    ];
    export const LOGIN_ROUTER_PROVIDERS: ModuleWithProviders =    RouterModule.forRoot(loginRoutes);

My Login component consits of the following method which has the redirection to Home component.

export class Login {
    ...
    public Login(userId, password)
    {
        //authenticate user and on sucessful authentication redirected to Home
         this.router.navigate(['/Home']);
    }

}

After the login/authentication, the home component and some other child level routing components are configured in HOME_ROUTER_PROVIDERS. HOME_ROUTER_PROVIDERS consits of following routing config

export const HOME_ROUTER_PROVIDERS: Routes = [
    {
        path: 'Home',
        component: Home,
        children: [
            { path: 'WorkbookList/:group', component: WorkbookList },
            { path: 'Workbook/:workbookID', component: Workbook },

            //some other child level routing components route
        ]
    }
];

Home component is as below

 export class Home {
        constructor(private _SessionService: SessionService) {
            console.log("In constructor of Home - After Login route");
        }
    }

When the application is executed and on successful authentication, the home component is getting loaded, but on the console I can notice that the statement "In constructor of Home - After Login route" is printed 2 times.

what is the mistake I am doing here and why the home component loads 2 times?

[Sander Elias]

Hi,

You are loading your home component twice. Once in your toplevel router, and then again in your home_router. You should remove it out of your toplevel router.

The details are explained on routers documentation page. 

Regards

Sander

[Navaneetha Krishnan S]

Hi,

thanks for the reply, I tried it by removing the top level router, but it throws me the error EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'Home'

I tried with the below code

const loginRoutes: Routes = [
        { path: '', component: Login },
        { path: 'login', component: Login },

   ...HOME_ROUTER_PROVIDERS
    ];
    export const LOGIN_ROUTER_PROVIDERS: ModuleWithProviders =    RouterModule.forRoot(loginRoutes);

do let me know if any other changes need to be done?

Regards,

Krishnan

[Sander Elias]

There is an example that shows exactly this in the document page I linked to in my reply. You need to load the child router the right way. I don't see that part in your code, so I assume the problem is there. If not, rebuild your issue in a plunk or a repo, and I will take a look.

Regards

Sander

[Navaneetha Krishnan S]

I went through the example plunker the link specified by you. The main difference which I notice is that in the example the login and heroes are in 2 separate modules but in my application both reside in the same NgModule. Is there any other specific difference you are pointing out? I am bit stuck with this issue, can you please give more inputs?

Example Plnkr https://plnkr.co/edit/?p=preview

[Sander Elias]

Hi,

the plunk you linked is an empty plunk, with no code showcasing your issue.

Regards

Sander

[Navaneetha Krishnan S]

Hi,

I tried reproducing the issue in Plnkr,  but unfortunately the issue is not reproducible in plunk. It works fine by loading only once of the Home component. But the issue still exists in my application.

I have tried creating the components in same way I have done it for the application, but I am not sure what is different which makes it here to work and not in my application.

Plunk https://plnkr.co/edit/pCAVBqeG5nKFuY2JrBUr?p=preview

Please review the code once and let me know your comments, if any potential issues which could cause the issue in my application.

Regards,

Krishnan