angular 4 routing adding a component rather than replacing it

Question

I have configured routes as follows in a sub module loaded dynamically.
I don't think the dynamic loading is causing the problem, but it may - so I have included it for reference.

dynamic load

children: [
    {
        path: "dashboard",
        loadChildren: () => new Promise(resolve => {
            (require as any).ensure([],
                require => {
                    resolve(require("./dashboard/dashboard.module").DashboardModule);
                },
                "dashboard");
        })
    },

dashboard-routing-module

const routes: Routes = [
    {
        path: "",
        component: ClearingDashboardComponent,
        data: {
            title: "Dashboard"
        }
    },
    {
        path: "logs",
        component: LogDisplayComponent,
        data: {
            title: "Logs"
        }
    }
];

the landing HTML looks as follows

When navigating to the LogDisplayComponent with

const ne: NavigationExtras = {
    queryParams: { ... }
};
this.router.navigate(["dashboard/logs"], ne);

A new component is being added above the HTML.
Surely each component should replace the inner HTML?

The LogDisplayComponent is above the ClearingDashboardComponent , As I click, a new component is added each time I navigate either way?

How do I fix the route to replace the component rather than add a new one?

I am using angular 4.4.4...

Answer 1

Try updating your version to 5+. This issue has already been addressed by the Angular team. For more information, check these links:

https://github.com/angular/angular/issues/17261

https://github.com/angular/angular/issues/13725