Angular router doesn't navigate for the first time from component to component

user_5387729 0
Viewed 2728

I want to redirect from signup component to challenge component after signup. If the local storage not set into the challenge component it will redirect to the signup component. My problem is to it will not navigate from signup to challenge component for the first time signup.

challange.component.ts

ngOnInit() {
    if(localStorage.getItem('userId') != null) {
     ......
    }
    else{
      this.router.navigate(['/signup']);
    }

  }

signup.component.ts

signupNew() {
    this.signupService.doSignup(this.parameter);
    this.router.navigate(['/challange']);
}

signup.service.ts

doSignup(signParam : SignupParam) {
    this.signupCollection.add(signParam).then(ref => {
      localStorage.setItem('userId', ref.id);
      console.log(localStorage.getItem('userId'))
    }).catch(err => {
      console.log('Check your Internet connection...');
    })
  }

route.ts

export const appRoutes : Routes = [
    { path : 'signup', component : SignupComponent },
    { path : 'challange', component: ChallangeComponent},
    { path : 'feed', component: NewsFeedComponent},
    { path : 'items-initial', component: InitialItemComponent},
    { path: '', redirectTo: '/', pathMatch : 'full'}
];
angular typescript
1 Answers

I think your issue is here:

this.signupService.doSignup(this.parameter);
this.router.navigate(['/challange']);

doSignup is asynchronous and you are not synchronizing it, so the router is navigating to /challange before userId is set in local storage which leads to another redirect the first time. However, at that point, the userId would be in localStorage. Synchronize these calls:

async doSignup(signParam : SignupParam) {
  // error handling omitted
  const ref = await this.signupCollection.add(signParam);
  localStorage.setItem('userId', ref.id);
}

async signupNew() {
  await this.signupService.doSignup(this.parameter);
  this.router.navigate(['/challange']);
}
user_4545330
Related