时间戳

首页 > 解决方案 > 组件是2个模块声明的一部分：AppModule

angular - 组件是2个模块声明的一部分：AppModule

问题描述

我正在尝试使用以下链接构建 Basic Ionic SideMenu https://ionicacademy.com/ionic-side-menu-tab-bars/，当我尝试构建时，我遇到了异常，例如错误：未捕获（承诺）：错误：类型 DashboardTabsPage 是 2 个模块声明的一部分：AppModule 和 DashboardTabsPageModule！请考虑将 DashboardTabsPage 移至导入 AppModule 和 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();
    });
  }
}

主页.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>

标签： angularionic-framework

解决方案

正如错误所说 "Type DashboardTabsPage is part of the declarations of 2 modules: AppModule and DashboardTabsPageModule!"，您需要DashboardTabsPage在app.module.ts 的导入下导出组件DashboardTabsPageModule并导入。DashboardTabsPageModule

由于您没有DashboardTabsPage模块，因此您只需从 app.module.ts 中删除它们

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

推荐阅读