Angular2 router doesn't replace component

Question

When I use router.navigate['some-route'], the component of the new route is added on top of the component of the old route instead of replacing it:

Current route is the login page:

After logging-in I'm navigating to my main page by doing:

this.router.navigate(['/form-builder']);

, but it's component is simply added on top of the login component without replacing it:

Root component template:

<router-outlet></router-outlet>

Routing configuration:

const routes: Routes = [
    { path: '', redirectTo: 'form-builder', pathMatch: 'full' },
    { path: 'form-builder', component: FormEditorComponent, canActivate: [AuthGuard] },
    { path: 'login', component: LoginComponent },
    { path: 'signup', component: SignupComponent },
];

What am I doing wrong?

Answer 1

When you see the component being added on TOP of the current component, it usually means there's some error being thrown. Check your dev console, and tell us if you're getting some errors when navigating. If there is, everytime you navigate somewhere else, it should keep on stacking components on top of eachother.

No, I'm not sure why, or if Angular meant for it to happen this way, but it does. Just speaking from experience.