# Tab on app.html

**URL:** <https://forum.ionicframework.com/t/tab-on-app-html/125126>\
**Category:** ionic-v3\
**Created:** [March 19, 2018, 1:22pm UTC](https://forum.ionicframework.com/t/tab-on-app-html/125126 "2018-03-19T13:22:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![simonioannides](https://avatars.discourse-cdn.com/v4/letter/s/958977/32.png) [@simonioannides](https://forum.ionicframework.com/u/simonioannides)\
**Post date:** [March 19, 2018, 1:22pm UTC](https://forum.ionicframework.com/t/tab-on-app-html/125126/1 "2018-03-19T13:22:41Z")

</div>

I want to make two tabs on app.html

```auto
        <button ion-button (click)="SettingsPage()"><i class="fa fa-cog" id="searchButton"></i></button>
        <button ion-button (click)="AccountPage()"><i class="fa fa-user" id="goldButton" title="Account"></i></button>

```

app.module.ts

```auto
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import {Camera} from '@ionic-native/camera';
import { AuthService } from '../providers/auth-service';
import { SplitPane } from '../providers/split-pane';
import { Common } from '../providers/common';
import { HttpModule } from "@angular/http";
import { Welcome } from '../pages/welcome/welcome';
import { Login } from '../pages/login/login';
import { Signup } from '../pages/signup/signup';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { UploadPage } from '../pages/upload/upload';
import { SearchPage } from '../pages/search/search';

**import { SettingsPage } from '../pages/settings/settings';**
 **import { AccountPage } from '../pages/account/account';**

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { MomentModule } from 'angular2-moment';
import { LinkyModule } from 'angular-linky';
import { AuthserviceProvider } from '../providers/authservice/authservice';

@NgModule({
  declarations: [
    MyApp,
    Welcome,
    Login,
    Signup,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    UploadPage,
      SearchPage,
      **SettingsPage,**
 **AccountPage**
  ],
  imports: [
    BrowserModule,HttpModule,MomentModule,LinkyModule,
    IonicModule.forRoot(MyApp), BrowserAnimationsModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Welcome,
    Login,
    Signup,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    UploadPage,
      SearchPage,
      **SettingsPage,**
 **AccountPage**
  ],
  providers: [
    StatusBar,
    SplashScreen,Camera,AuthService,SplitPane,Common,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
      AuthserviceProvider
  ]
})
export class AppModule {}

```

app.component.ts

```auto
import { Component } from '@angular/core';
import { Platform, App, MenuController, NavController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SplitPane } from '../providers/split-pane';
import { Welcome } from '../pages/welcome/welcome';

**import { SettingsPage } from '../pages/settings/settings';**
 **import { AccountPage } from '../pages/account/account';**

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = Welcome;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, **public navCtrl: NavController** , public app: App, public splitPane: SplitPane, public menu: MenuController) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  **SettingsPage() {**
**this.navCtrl.push(SettingsPage);**
 **}**

**AccountPage() {**
**this.navCtrl.push(AccountPage);**
 **}**

   backToWelcome(){
   const root = this.app.getRootNav();
    root.popToRoot();
  }

  logout(){
    //Api Token Logout 
    
    localStorage.clear();
    this.menu.enable(false);
     setTimeout(()=> this.backToWelcome(), 1000);
    
  }
}

```

And i am getting an error Unexpected value ‘undefined’ declared by the module ‘AppModule’

What i am doing wrong?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:44pm UTC](https://forum.ionicframework.com/t/tab-on-app-html/125126/2 "2021-07-19T21:44:27Z")

</div>