title: How to hide ionic 4 Tabs just for login page
body: <p>I'm working on a project with tabs in it but it should only appear after user login.</p>
  
  <p>The tabs works just fine when its route in app.routing.module.ts is like this:</p>
  
  <pre><code>{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
  </code></pre>
  
  <p>But when I use login like this:</p>
  
  <pre><code>{ path: '', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'home', loadChildren: './tabs/tabs.module#TabsPageModule' }
  </code></pre>
  
  <p>It doesnt work.</p>
  
  <p><strong>app.routing.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  const routes: Routes = [
    { path: '', loadChildren: './login/login.module#LoginPageModule' },
    { path: 'home', loadChildren: './tabs/tabs.module#TabsPageModule' },
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p><strong>tabs.routing.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { TabsPage } from './tabs.page';
  
  
  
  const routes: Routes = [
    {
      path: 'home',
      component: TabsPage,
      children: [
        {
          path: '',
          redirectTo: '/home/(MyPlaces:MyPlaces)',
          pathMatch: 'full'
        },
        {
          path: 'MyPlaces',
          outlet: 'MyPlaces',
          loadChildren: '../MyPlaces/MyPlaces.module#MyPlacesPageModule'
        },
        {
          path: 'Messages',
          outlet: 'Messages',
          loadChildren: '../Messages/Messages.module#MessagesPageModule'
        }
      ]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class TabsPageRoutingModule { }
  </code></pre>