Navigate from Login page to Tabs in Ionic4?

Ionic Framework
1

I am creating an application and i want move from login Page to Tabs Page. When I try to navigate to Tabs page, its only showing Home page without Tabs.

here is my Code.

app-routing.module.ts

 import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';

    const routes: Routes = [
          { path: '', redirectTo: 'login', pathMatch: 'full' },
          { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },

          { path: 'tabs', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }
    ];

    @NgModule({
       imports: [RouterModule.forRoot(routes)],
       exports: [RouterModule]
    })
    export class AppRoutingModule { }

tabs.module.ts

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    import { Routes, RouterModule } from '@angular/router';
    import { IonicModule } from '@ionic/angular';

    import { TabsPageRoutingModule } from './tabs.router.module';

    import { TabsPage } from './tabs.page';
    import { HomePageModule } from '../home/home.module';
    import { ActivityPageModule } from '../activity/activity.module';
    import { MygroupsPageModule } from '../mygroups/mygroups.module';
    import { MessagesPageModule } from '../messages/messages.module';
    import { SettingsPageModule } from '../settings/settings.module';


    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        TabsPageRoutingModule,
        HomePageModule, 
        ActivityPageModule,
        MygroupsPageModule,
        MessagesPageModule,
        SettingsPageModule
      ],
      declarations: [TabsPage]
    })
    export class TabsPageModule {}

tabs.router.module.ts

import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';

    import { TabsPage } from './tabs.page';
    import { HomePage } from '../home/home.page';
    import { ActivityPage } from '../activity/activity.page';
    import { MygroupsPage } from '../mygroups/mygroups.page';
    import { MessagesPage } from '../messages/messages.page';
    import { SettingsPage } from '../settings/settings.page';



    const routes: Routes = [
      {
        path: 'tabs',
        component: TabsPage,
        children: [
          {
            path: '',
            redirectTo: '/tabs/(home:home)',
            pathMatch: 'full',
          },
          {
            path: 'home',
            outlet: 'home',
            component: HomePage
          },
          {
            path: 'activity',
            outlet: 'activity',
            component: ActivityPage
          },
          {
            path: 'mygroups',
            outlet: 'mygroups',
            component: MygroupsPage
          },
          {
            path: 'messages',
            outlet: 'messages',
            component: MessagesPage
          },
          {
            path: 'settings',
            outlet: 'settings',
            component: SettingsPage
          }
        ]
      }
    ];

    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class TabsPageRoutingModule {}

From Login page, I am navigating in this way.

   this.router.navigate(['tabs']);

but this is just showing a home page with no tabs. Can you guide me what should i do, even tabs are not showing in DOM, i tried to inspect them.
It is just showing Home Page as default Page.

1 Like
2

Try adding below code at the end of your tabs.router.module.ts router link-

{
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
}

If does not work post your login.ts code here

3

@champion007 i added this already, but did not work.

import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';

    @Component({
      selector: 'app-login',
      templateUrl: './login.page.html',
      styleUrls: ['./login.page.scss'],
    })
    export class LoginPage implements OnInit {


      constructor(
        public router: Router) {
    	  	
      }

      ngOnInit() {

      	
      }

      /**
       * @desc : Function to submit request to Login to Server
       * @param : none
       * @return : none
       */
      doLogin(_user){
      	console.log('doLogin User: ',_user);    
        this.router.navigate(['/tabs']);
         
      }


    }
4

If I understand you correctly you navigate from LoginPage to HomePage but the Tabs won’t show in the HomePage. If thats the case you can do this.

In your HomePage.ts:

  ionViewDidLoad() {
    let tabs = document.querySelectorAll('.show-tabbar');
    if (tabs !== null) {
      Object.keys(tabs).map((key) => {
        tabs[key].style.display = 'flex';
      });
    }

If you want to hide the tabs on a specific Page use the same code and change the value flex to none.