Ion-tab and Angular Routing Multi Tenancy Ionic 4


#1

Hello,

I’m trying use ion-tab together with multi-tenancy defined in my WebApp.

The multi-tenancy works, but when I go to tabPage, the Router didn’t find my page.

I tried all of the samples provides in here

Is it possible? Or I need use only angular?

The code:

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

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

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

app.routing.module.ts

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

const routes: Routes = [
  {
    path: ':tenant',
    children: [
      { path: '', component: LoginPage },
      { path: 'login', component: LoginPage },
      { path: 'tabs', component: TabsPage }      
    ]
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

app.component.ts

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router, NavigationStart } from '@angular/router';
import { AppSettings } from '../../AppSettings';

const addPath = (urlAndQuery: string[]) => urlAndQuery[0] ? '/' + urlAndQuery[0] : '';
const addQuery = (urlAndQuery: string[]) => urlAndQuery[1] ? '?' + urlAndQuery[1] : '';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  private activeTenant: string;

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private router: Router
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });

    const tenants = ['colsimbios', 'visao'];
    const defaultTenant = AppSettings.dominio;
    
    this.router.events.subscribe((event: any) => {

      if(!(event instanceof NavigationStart)) return;
      
debugger;

      const url = event.url === '/' ? '' : event.url;
      const urlAndQuery = url.split('?');
      const pathMap = urlAndQuery[0].split('/');
      const firstPathPart = pathMap[1];
      if (tenants.includes(firstPathPart) || firstPathPart === defaultTenant) {
        if (firstPathPart !== this.activeTenant) {
          this.activeTenant = firstPathPart;
        }

      } else {
        let prefix;
        if (this.activeTenant) {
          prefix = this.activeTenant;
        } else {
          prefix = defaultTenant;
        }
        const redirectUrl = '/' + prefix + addPath(urlAndQuery) + addQuery(urlAndQuery);

        console.log(this.router.config);
        this.router.navigate([redirectUrl]);        
      } 
      
    });
  }
}

tabs.html

<ion-tabs #myTabs *ngIf="carregouOsDados">
          <ion-tab *ngIf="perfil.Tipo" icon="home" label="Notícias"  href="tabs/(home:home)">
            <ion-router-outlet name="home"></ion-router-outlet>           
          </ion-tab>
</ion-tabs>

The error:

Does anybody try it?