Angular router appends component data instead of replacing the component

Question

First of all i tried with this answers but not found my solution: Similar question

Let me expalin how i implemented:

1. I have two components forgot-password & new-password
2. When the user submit forgot password form he will get a email verification link.
3. when user clicks that email link
4. it will go to forgot-password.ts file and then in ngOnInit ajax call will go.
5. From ajax response if success data it will redirect to the new-password

or

6. it will throw the error in frogot password page itself

My issue: when I try to navigate to new-password from forgot-password ts file after ajax response using the external link (Gmail link) ; it appends component data instead of replacing the forgot with new component.

My app.moduel.ts:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  imports:      [
   BrowserAnimationsModule,
})

And this my route code forgot-password.ts :

if(result.data == "failure")    {
// failure no data
}
else {
// success data
this._router.navigate(['new-password']);
}

NOTE

1. When I comment these BrowserAnimationsModule in my app.module.ts the routing is working fine.But I need thisBrowserAnimationsModule.! what is the alternate solution.
2. If not form external link(Gmail) the routing is working fine.

Answer 1

Update to lastest version of Angular

Also, try :

 if(result.data == "failure")    {
    // failure no data
 }
 else {
   // success data
   this.zone.run(() =>{
      this._router.navigate(['new-password']);
   });
 }

Answer 2

For me

setTimeout(() => {
   this.router.navigate(['']);
}, 0);

did the trick

Answer 3

Instead of navigating to new-password from forgot-password ts file,you can give the route link of your new password page in your email verification link,and in constructor of new password component you can use your ajax call,on success of that open new password page and in error case navigate to the error page.