Login page before tabs page - ionic 4

Ionic Framework
1

Hi,
I’ve downloaded the tab project of ionic 4 version.
I’ve tried to add a login page before the TabPage. But it doesnt’ work for me.

Here my app-routing.module.ts file

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

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

And my tabs.router.module file

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

import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { AboutPage } from '../about/about.page';
import { ContactPage } from '../contact/contact.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tabs',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: 'tabs',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

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

The page which is displayed is the first declared in TabsPageModule (here AboutPage is shown) without the tabs under.

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule,
    AboutPageModule, 
    HomePageModule,
    ContactPageModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

Does any body know how to fix this ?

Thank’s

2

Code looks fine only, can you try adding login route before tabs and restart the console( rerun ionic serve).

:slight_smile:

3

Thank’s for the answer, but it have no effects.

4

You might want to investigate Route Guards so that you can ensure the person has logged in no matter what page they visit.

I have that requirement and will be using Route Guards to control program flow.

5

Thank’s for the reply, I’ve also tried with a guard

auth.guard

 canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | Observable<boolean> | Promise<boolean> {
    return new Promise((resolve, reject) => {
      this.storage.ready().then(() => {
        this.storage.get('currentUser').then((val) => {
          if (val) {
            resolve(true);
          } else {
            this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
            resolve(false);
          }
        });
      });
    });

app-routing.module

const routes: Routes = [
  { path: '', redirectTo: 'tabs', pathMatch: 'full' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule', canActivate: [AuthGuard], },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' }
];

tabs.router.module

const routes: Routes = [
    {
      path: '',
      redirectTo: '/tabs',
      pathMatch: 'full',
      canActivate: [AuthGuard],
    },
    {
    path: 'tabs',
    component: TabsPage,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'tabs',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  }
];
6

take a look at the solution I posted for side-menu auth, the approach should work for you here.

but i thing you need to change this line

{ path: '', redirectTo: 'tabs', pathMatch: 'full' },

to this

{ path: '', redirectTo: 'login', pathMatch: 'full' },
7

I tested your solution.
My problem is not with the auth part which is running in other projets but on showing tabs on after login page.
you can try to add tabs to your project to see my problem.
Thank’s

8

You don’t know where the problem is, I assume that is why you are asking the question… I am going to suggest that you post a project for review

9

I create a project on github : https://github.com/jekes/Ionic-Tab-Auth

10
11

Ok, but the tabs doesn’t appears in the project after login …

2 Likes
12

That is an issues with your code and how you setup the templates - I suggest you open another issue/ticket about how to create a tab based application

13

I’ve used the “tabs” project build by ionic team project so I do not need to reopen a ticket to create a tab based application. I’ve create the same application with Ionic 3, here I have a problem to migrate to Ionic 4
My problem was clearly mentioned, so stop responding to my questions, all the answers you gave are off based

1 Like
14

Try this - Ionic 4 tabs navigation post login - Solution

3 Likes
15

Thank’s, it works now !

16

your tabs don’t show in your project either dude - on your link…

17

This is a problem with Ionic 4, I get the exact same behaviour. And your stackblitz is pointless and useless.

18

thanks for the feedback, can you be more specific :slight_smile:

19


refer this answer. It worked fine for me

I removed the path:‘tabs’ under routes:Routes then the code will be like this. I am pasting the code from my file

const routes: Routes = [   {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]   }, ];

in app-routing.module.ts the code will be like this

const routes: Routes = [    {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)   },   {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)   },      {
    path : '',
    redirectTo : 'login',
    pathMatch : 'full'   } ];
1 Like