How to hide ionic 4 Tabs just for login page

Import the TabsPageModule and put it on app.module.ts to the imports: [...]. This works for me.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

import { TabsPageModule } from './tabs/tabs.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, TabsPageModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

After so many attempts I found that this approach will never work like that at least for now the only way for this to work is to not use lazy loading the code will be like that:

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabsPage } from './tabs/tabs.page'

const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'home', component: TabsPage },
];

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TabsPageModule } from './tabs/tabs.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    TabsPageModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Notice importing TabsPageModule.

tabs.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { MyPlacePage } from '../MyPlaces/MyPlaces.Page';
import { MessagesPage } from '../Messages/Messages.Page';


const routes: Routes = [
  {
    path: 'home',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/home/(MyPlaces:MyPlaces)',
        pathMatch: 'full'
      },
      {
        path: 'MyPlaces',
        outlet: 'MyPlaces',
        component: MyPlacePage
      },
      {
        path: 'Messages',
        outlet: 'Messages',
        component: MessagesPage
      }
    ]
  }
];

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

tabs.module.ts

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

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

import { TabsPage } from './tabs.page';
import { MyPlacesPageModule } from '../MyPlaces/MyPlaces.module';
import { MessagesPageModule } from '../Messages/Messages.module';

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

Notice also that you need to work with href to link tabs page not routerLiknk.

I found a way to do this with lazy loading. In the page which contains the tabs we add a new variable which is a class and updated when the navigation changes:

<ion-tabs [class]="'url' + currentUrl">

</ion-tabs>

This class is updated in the .ts file:

import {Router,Event,NavigationEnd} from '@angular/router';

@Component({
    selector: 'app-home',
    templateUrl: './home.page.html',
    styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
    public notificationCount = 0;
    public currentUrl: string;

    constructor(private router: Router) {
        this.router.events.subscribe((event: Event) => {
            if (event instanceof NavigationEnd) {
                console.log('loading finished', event);
                this.currentUrl = event.url.split('/').join('-')
            }
        });
    }

In this way you can hide the tabbar using css in your global.scss

ion-tabs {
    &.url-home-tournaments-main-play,
    &.url-home-tournaments-main-play-score {
        ion-tab-bar {
            display: none;
        }
    }
}