Routing Issue in Angular 4, not destroying previous components

Question

It used to work fine with Angular 2, and after upgrading to Angular 4, it has stopped working.

This is my routing looks like:

const appRoutes: Routes = [
    { path: 'Profile/:name', component: CompanyprofileComponent },
    { path: 'Account/Login', component: LoginComponent, pathMatch: 'full' },
    { path: 'admin', component: adminLayout, canActivate: [AdminGuard], canActivateChild: [AdminGuard], children: Admin_Routes },
    // { path: 'organization', component:orgLayout,canActivate:[OrgGuard], children:Org_Routes},
    { path: '', component: userLayout, canActivate: [Guard], canActivateChild: [Guard], children: User_Routes }, //, canDeactivate: [PendingChangesGuard]
    { path: 'opr', component: OPRlayout, children: OPR_Routes },
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true });

This is my app.component file:

<router-outlet></router-outlet>

Now , when I load the URL, say http://localhost:4200/#/Items, it loads the component correctly. When I load a different, it should practically destroy the previous component and show the new component. But it shows two components of user layout. See below screenshot:

I understand that I might have definitely done something horribly wrong which is causing this, but I am unable to find it out. While I understand that it is difficult for you guys out there to identify the issue without me posting the whole (which is quiet a bit project), but all I need is a point where I can look at and any help in debugging this issue will be really appreciated. One more thing, if I remove this module: BrowserAnimationsModule, it starts working fine. But I really need this module to make my Angular Material Animations work. Any help? Thanks for reading.

Answer 1

Well, considering your original question, it seems that you may have not provided sufficient information to analyze the root of your problem.

However, it is possible that your code may have thrown some runtime error, and if your code happens to utilize BrowserAnimationsModule, then angular may fail to replace the previous component with the new one but instead append the new component on top of the old ones. This is a known issue, concerning the BrowserAnimationsModule of Angular 4. You can eliminate the runtime error from your code and everything would work out fine.

You can check out the issue description at github: https://github.com/angular/angular/issues/19093