How to replace Login with Account on Login. [Ionic 5] -> IonicTabs

Question

I'm trying to replace the LoginPage with The AccountPage after user logs in, keeping the Tabs on the bottom, however after using, this.router.navigate(account), it completely removes the tabs.

Expected behaviour: User clicks account tab, user logs in, Login page is replaced with user account page. Below are some screenshots of the expected behaviour

Before login

After login

• login-page.ts

    login() {
        if (this.loginForm.valid) {
            this.loadingService.show();
            this.userService.login(this.loginForm.value).subscribe(
                (data: any) => {
                    this.loadingService.hide();
                    if (data.status === "success") {
                        let user = data.data;
                        this.storageService.setUser(user);
                        this.events.publish("user:logged", user);
                        this.openUserAccount(user.id, user);
                    } else {
                        this.alertService.present(data.message, data.status);
                        console.log(data.message, data.status )
                    }
                },
                () => {
                    this.loadingService.hide();
                    this.toastService.showGenericError();
                }
            );
        }
    }

    openUserAccount(id: string, user: User){
        this.dataService.setData(id, user);
        this.router.navigate(["/account", id]);


    }

• tabs.page.ts

tabs: any[] = [
        {
            name: "novelties",
            icon: "icon-novelties"
        },
        { 
            name: "pratos",
            icon: "icon-menus" },
        { 
            name: "account",
            icon: "icon-user" 
        },
        {
            name: "stores",
            icon: "icon-stores"
        },
        { 
            name: "about",
            icon: "icon-qrcode" 
        }
    ];

• tabs-routing.module.ts

const routes: Routes = [
    {
        path: "tabs",
        component: TabsPage,
        children: [
            {
                path: "novelties",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/novelties/novelties.module").then(m => m.NoveltiesPageModule)
                    }
                ]
            },
            {
                path: "pratos",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/pratos/pratos.module").then(m => m.PratosPageModule)
                    }
                ]
            },
            {
                path: "account",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/login/login.module").then(m => m.LoginPageModule)
                    }
                ]
            },
            {
                path: "stores",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/stores/stores.module").then(m => m.StoresPageModule)
                    }
                ]
            },
            {
                path: "about",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/about/about.module").then(m => m.AboutPageModule)
                    }
                ]
            },
            {
                path: "",
                redirectTo: "/tabs/novelties",
                pathMatch: "full"
            }
        ]
    },
    {
        path: "",
        redirectTo: "/tabs/novelties",
        pathMatch: "full"
    }
];

Answer 1

So I managed to get it to work. Now I just need to be able to pass the id, which is not working.

Here's how I did it:

• tabs-routing.module.ts

//----- ADDED THIS PATH
{
                path: "login/account/:id",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/account/account.module").then(m => m.AccountPageModule)
                    }
                ]
            },

• login.page.ts

 openUserAccount(id: string, user: User){
        this.dataService.setData(id, user);
       ///// this.router.navigate(["/account", id]); <-- REMOVED THIS LINE
        this.router.navigate(['tabs/login/account', id]); <-- REPLACED WITH 
    }

Now the problem with the tab is solved, however I cannot access the id.

• account.page.ts

    ngOnInit() {
    console.log(this.route.snapshot.parent.data["user"]); <-- I'm certain the problem is here..
        if (this.route.snapshot.parent.data["user"]) {
            this.user = this.route.snapshot.data["user"];
            console.log(this.user);
    }
    console.log(this.user);
    }
}

How can i acess the id