Router.navigate not working in ionic app

I have a problem in routing from one page to another page. I have a login page which is the home page of my app so when the login is successful i navigate from login page to profile page. The profile page load in ion-router-outlet but the login page don’t move away and is always showing.
AuthService called on login submit

authenticationState = new BehaviorSubject(false);
  constructor(
    private msgService: MessagesService,
    private http: HTTP,
    private router: Router,
    private storage: Storage,
    private plt: Platform
  ) {
    this.plt.ready().then(() => {
      this.checkToken();
    });
  }

  login({ email, password }) {
    this.loading = true;
    this.http
      .post(
        'some link for getting token',
        {
          username: email,
          password
        },
        { 'Content-Type': 'application/json' }
      )
      .then(data => {
        const res = JSON.parse(data.data);
        if (res.status == 'success') {
          this.msgService.addMessage('Login successfull', 'success');
          console.log(res.data);
          this.storage.set('token', res.data.token).then(() => {
            this.authenticationState.next(true);
            this.router.navigate(['profile']).then(() => {
              console.log('going to profile');
            });
            this.loading = false;
          });
        } else if (res.status == 'error') {
          console.log(res);
          this.msgService.addMessage(res.message, 'danger');
          this.loading = false;
          this.clearRecords();
        }
      })
      .catch(error => {
        console.log(error);
        this.msgService.addMessage('Internal server error', 'danger');
        this.loading = false;
        this.clearRecords();
      });
  }

Routing page.ts

{
    path: 'login',
    // loadChildren: './pages/auth/login/login.module#LoginPageModule'
    loadChildren: () =>
      import('./pages/auth/login/login.module').then(m => m.LoginPageModule)
  },
  {
    path: 'register',
    loadChildren: './pages/auth/register/register.module#RegisterPageModule'
  },
  {
    path: 'profile',
    //canActivate: [AuthGuard],
    loadChildren: './pages/profile/profile.module#ProfilePageModule'
  },

app.component.ts

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.authService.authenticationState.subscribe(state => {
        if (state) {
          this.router.navigate(['profile']);
        } else {
          this.router.navigate(['login']);
        }
      });
    });
  }

router-outlet in debug mode
debug

1 Like