In Ionic, why doesn't the routing work on iPhone, but works on built version and on ionic serve

Issue

I have an app (that - by the way - communicates with node.js server), in ionic and routing and login page works for ionic serve version, but fails to run as an iPhone app. The problem is that I can run the app on iPhone and see the login page, but when I set the correct credentials and press OK, I am not routed to the next page (which is the default page that goes when user logs in), so I don't know where the bug is. I tried to build the app with index.html having base href="/" and base href="." and that didn't work. What else can I try? This is code in app.module.ts that has definition of routing module:

import { AppRoutingModule } from './app-routing.module';

and then also it has the imports part:

imports: [
    BrowserModule,
    AppRoutingModule, 
    SharedModule,
  ],

next, this is related code in ap-routing.module:

import { Routes, RouterModule } from "@angular/router";
import { AuthGuard } from "./services/auth.guard";

const routes: Routes = [
    {
        path: "streams",
        loadChildren: "./components/streams/streams.module#StreamsModule",
        canActivate: [AuthGuard]
    },

StreamsModule relevant code:

import { StreamsRoutingModule } from './streams-routing.module';
import { SharedModule } from './../../shared/shared.module';

@NgModule({
  declarations: [StreamsComponent],
  imports: [
    CommonModule,
    SharedModule,
    StreamsRoutingModule
  ]
})

This is the code that is triggered on login:

loginUser() {
        this.showSpinner = true;
        this.authService.loginUser(this.loginForm.value).subscribe(
            data => {
                this.tokenService.SetToken(data.token);
                this.loginForm.reset();
                setTimeout(() => {
                    this.router.navigate(["streams"]);
                }, 3000);
            },
            err => {
                this.showSpinner = false;

                if (err.error.message) {
                    this.errorMessage = err.error.message;
                }
            }
        );
    }

finally, the routes variable in streams routing module:

const routes: Routes = [
    {
        path: "",
        component: StreamsComponent
    },
    {
        path: "streams",
        component: StreamsComponent
    },
    {
        path: "**",
        redirectTo: "streams",
        pathMatch: "full"
    }
];

This is the authguard:

import { Injectable } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
import { Observable } from "rxjs";
import { TokenService } from "./token.service";

@Injectable({
    providedIn: "root"
})
export class AuthGuard implements CanActivate {
    constructor(private router: Router, private tokenService: TokenService) {}

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> | Promise<boolean> | boolean {
        const token = this.tokenService.GetToken();
        if (token) {
            return true;
        } else {
            this.router.navigate(["/"]);
            return false;
        }
    }
}

Now, during the log in process on ios app, while inspecting using safari developer mode, I can see the http traffic from the app on my iPhone, and I can see that the calls are being made and proper response is retrieved, i.e. I am logged in, but, the screen freezes on the login page. Why is the routing not working properly on the ios app and works correct on the ionic server version?

Solution

The problem was in the AuthGuard service, as it turned out. Guard returns a boolean result. If the user is logged in, it returns true and the navigation continues.

The Auth Guard was the cause, I simplified it by just returning true, and it passes on the routing now works.

I'm glad I was able to help you to come up with a solution.

---

P.S. Additionally, if you want to prevent the application from loading the entire module if the user is not authorized to do so you can use canLoad(). For example:

canLoad() {
    return this._storage.get('userLogged').then(res => {
      if (res) {
        this.router.navigate(['/example-route']);
        return false;
      } else {
        return true;
      }
    });
}

Answered By - Tomislav Stankovic