Ionic tabs do not displays!

Ionic Framework ionic-v3
1

Hello Everyone,
i need help please .
After i created tabs page , and injected it in app.module.ts and then it doesn’t appear when i launched ionic serve ,
so i did use something in my app.page .html , it appeared but the side menu stopped working .
the application do not display any error but the side menu just stopped working .

My app.page.html

<div class="{{global.state['theme']}}">

  <!--Dark Design Menu-->
  <ion-menu [content]="content" id="menu-dark">
    <ion-header class="sidemenuHeader">
      <ion-toolbar>
        <ion-item no-lines>
          <ion-avatar item-left>
            <h2>G</h2>
          </ion-avatar>
          <h2>Bonjour,invité</h2>
          <p>Bienvenu à E-Reclamation !</p>
        </ion-item>
      </ion-toolbar>
    </ion-header>


    <ion-content class="menu">
      <ion-list>
        <button menuClose="left" ion-item *ngFor="let p of pages" (click)="openPage(p)">
          <ion-icon [name]="p.icon" item-left></ion-icon>  {{p.title}}
        </button>
      </ion-list>
    </ion-content>
  </ion-menu>
  <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
  <ion-nav [root]="rootPage" [root]="rootsPage" #content swipeBackEnabled="false"></ion-nav>

  

</div>

my app.component.ts

import { AppState } from './app.global';
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, MenuController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Subject } from 'rxjs';
import { SideMenuPage } from '../pages/side-menu/side-menu';
import { ConnecterPage } from '../pages/connecter/connecter';
import { InscriptionPage } from '../pages/inscription/inscription';
import { SettingsPage } from '../pages/settings/settings';
import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
tabsroots: any = TabsPage;
  rootPage: any = 'SideMenuPage';
  activePage = new Subject();

  pages: Array<{ title: string, component: any, active: boolean, icon: string }>;
  rightMenuItems: Array<{ icon: string, active: boolean }>;
  state: any;

  constructor(
    public platform: Platform,
    public statusBar: StatusBar,
    public splashscreen: SplashScreen,
    public global: AppState,
    public menuCtrl: MenuController
  ) {
    this.initializeApp();
    this.rightMenuItems = [
      { icon: 'home', active: true },
      { icon: 'contact', active: false },
      { icon: 'settings', active: false }

    ];

    this.pages = [

      { title: 'Home', component: 'SideMenuPage', active: true, icon: 'home' },
      { title: 'Se Connecter', component: ConnecterPage, active: false, icon: 'contact' },
        { title: 'Inscrivez-vous', component: InscriptionPage, active: false, icon: 'contact' },
      { title: 'Parametres', component: SettingsPage, active: false, icon: 'settings' }

     ];

    this.activePage.subscribe((selectedPage: any) => {
      this.pages.map (page => {
        page.active = page.title === selectedPage.title;
      });
    });
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.global.set('theme', '');
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashscreen.hide();
      this.menuCtrl.enable(false, 'right');
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
    this.activePage.next(page);
  }

  rightMenuClick(item) {
    this.rightMenuItems.map(menuItem => menuItem.active = false);
    item.active = true;
  }
}