component gets load before destroying another in angular 2 router

Question

I am facing issue in Angular 2 router view rendering. any help would be appreciated.

Current Scenario:

While navigating from one view to another, Angular 2 router loads the new view on top of the previous one without destroying the previous view.

Here is the Image.

(The red line representing different pages where you can see actually 3 views getting loaded on top of each other).]

Expected Scenario:

The router should first destroy the first view and then loads the next.

Routes file

export const ROUTES: Routes = [
    {
    path: '',
    component: ParentComponent,
    children: [
        {
            path: 'child1',         
            component: ChildComponent1
        },
        {
            path: 'child2',
            component: ChildComponent2
        },
        {
            path: 'child3/:id',
            component: ChildComponent3
        }
        ]
    },
    {
        path: 'SiblingComponent',
        component: SiblingComponent
    }
]

then in my App Module I am importing these routes as followed.

App.module

 @NgModule({
  imports: [
    RouterModule.forRoot(ROUTES)
  ]
 })

btw. I am using "@angular/router": "^4.0.0" and the application is built using angular-cli

Also, I am not actually sure if that's an Angular 2 router issue or some other thing is the root cause of it. EDIT

Here is the HTML of the components

App.component.html <router-outlet></router-outlet>

Parent.component.html <router-outlet></router-outlet>

Child1.component.html <div>Child 1</div>

Child2.component.html <div>Child 2</div>

Child3.component.html <div>Child 3</div>

Sibling.component.html <div>Sibling Component</div>