CODEWITHSUNDEEP
angularionic-framework
AbhiRam
AbhiRam

Reputation: 2061

Component is part of the declaration of 2 modules: AppModule

I am trying to build Basic Ionic SideMenu with following below link https://ionicacademy.com/ionic-side-menu-tab-bars/ and when i try to build i am getting exception like Error: Uncaught (in promise): Error: Type DashboardTabsPage is part of the declarations of 2 modules: AppModule and DashboardTabsPageModule! Please consider moving DashboardTabsPage to a higher module that imports AppModule and DashboardTabsPageModule

app.module.ts:

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DashboardTabsPage } from '../pages/dashboard-tabs/dashboard-tabs';
import { ListsTabsPage } from '../pages/lists-tabs/lists-tabs';
import { NoTabsPage } from '../pages/no-tabs/no-tabs';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    DashboardTabsPage,
    ListsTabsPage,
    NoTabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    DashboardTabsPage,
    ListsTabsPage,
    NoTabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

app.component.ts:

export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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();
    });
  }
}

Home.ts:

import { DashboardTabsPage } from '../dashboard-tabs/dashboard-tabs';
import { ListsTabsPage } from '../lists-tabs/lists-tabs';
import { NoTabsPage } from '../no-tabs/no-tabs';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild(Nav) nav: Nav;
  pages: Array<{title: string, component: any}>;
  rootPage = 'DashboardTabsPage';

  constructor(public navCtrl: NavController) {
    this.pages = [
      { title: 'Dashboard', component: DashboardTabsPage },
      { title: 'My Lists', component: ListsTabsPage },
      { title: 'Direkt Profile Link', component: DashboardTabsPage},
      { title: 'No Tabs Link', component: NoTabsPage },
    ];
  }

  openPage(page) {
    this.nav.setRoot(page.component, { openTab: page.openTab });
  }

}

home.ts:

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Upvotes: 1

Views: 8421

Answers (5)

In&#234;s Gomes
In&#234;s Gomes

Reputation: 4821

I have 2 pages:

  1. ChatPage
  2. ChatGroupPage

I deleted the module of chatGroupPage.ts and in the chatModule.ts I include the ChatGroupPage in declarations:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ChatPage, ChatGroupPage],
  entryComponents:[ChatGroupPage]
})

Is working :-)

Upvotes: 0

yer
yer

Reputation: 1532

Remove the import of DashboardTabsPage from app.module.ts. Cause it is already being imported in home.ts

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

As the error says "Type DashboardTabsPage is part of the declarations of 2 modules: AppModule and DashboardTabsPageModule!" you need to export the component DashboardTabsPage in DashboardTabsPageModule and import DashboardTabsPageModule under imports of app.module.ts.

Since you dont have DashboardTabsPage module, you just remove those from the app.module.ts

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    // DashboardTabsPage,
    // ListsTabsPage,
    // NoTabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ]

Upvotes: 1

Parvej Mallick
Parvej Mallick

Reputation: 465

Easy way

**
import { NoTabsPage } from '../pages/no-tabs/no-tabs';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    // DashboardTabsPage,
    // ListsTabsPage,
    // NoTabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
**

comment out the geneated ionic page declarations

Upvotes: 0

P.S.
P.S.

Reputation: 16384

As the error says, you can't include such entities to multiple modules. The proper way will be to import it to DashboardTabsPageModule and import this module to AppModule. Don't include it to both at the same time.

Upvotes: 0

Related Questions