Angular2 router appends component instead of replacing it
By using the method of elimination, I found out that the culprit of the issue was the BrowserAnimations module in my app.module.ts. By removing it from my imports it the problem went away. I'll look into creating a Plunker to demonstrate it.
Update:This is described in this Github issue.
Update 2017-12-13:This has now been fixed with this PR, fix(animations): properly recover and cleanup DOM when CD failures occur.
This happens also when component A is throwing an error, so when navigating to Component B, Component A could not be destroyed due to the error. This is a bug with Angular. Until they fix, find the cause of the error being thrown and fix it. Check your dev tools console.
I had a very similar issue, also using Firebase.
See the components being appended to router outlet
However, I found that the issue was coming from an error within one of my components, not related to my routing. One of the components had a reference to a "FormsArray", which was not used and malformed. It threw errors in the devtools console, but I didn't think of checking there, since everything was compiling fine.
Not sure if that will help anybody.