How to hide ionic 4 Tabs just for login page - ionic-framework

Question

I'm working on a project with tabs in it but it should only appear after user login.
The tabs works just fine when its route in app.routing.module.ts is like this:
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
But when I use login like this:
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'home', loadChildren: './tabs/tabs.module#TabsPageModule' }
It doesnt work.
app.routing.module.ts
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 { }
tabs.routing.module.ts
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 { }

Answer 1

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 {}

Answer 2

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.

Answer 3

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;
}
}
}