CODEWITHSUNDEEP
ajaxangularroutescomponentsangular4-router
Mr world wide
Mr world wide

Reputation: 4814

Angular router appends component data instead of replacing the component

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

  1. 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.

Upvotes: 1

Views: 793

Answers (3)

Albin Jordan
Albin Jordan

Reputation: 43

For me 

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

did the trick

Upvotes: 1

isy
isy

Reputation: 563

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']);
   });
 }

Upvotes: 4

Abhishek saini
Abhishek saini

Reputation: 527

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.

Upvotes: 0

Related Questions