Ionic 中的页面是 2 个模块声明的一部分答案

【问题标题】：Page in Ionic is part of the declarations of 2 modulesIonic 中的页面是 2 个模块声明的一部分
【发布时间】：2020-03-28 05:08:56
【问题描述】：

我有一个 ionic 3 项目，文件 app.module.ts 类似于：

@NgModule({
declarations: [
    MyApp,
    HomePage,
    AdminPage,
    ActuDetailPage,
],...

当我在我的 android 设备上部署为 dev 时，没问题，但是当我使用 --prod --release 参数部署时，我收到以下错误消息：

Type ActuDetailPage in /Users/poste5hookipa/sites/frApp4/src/pages/actu-detail/actu-detail.ts is part of the 
        declarations of 2 modules: AppModule in /Users/poste5hookipa/sites/frApp4/src/app/app.module.ts and 
        ActuDetailPageModule in /Users/poste5hookipa/sites/frApp4/src/pages/actu-detail/actu-detail.module.ts! 
        Please consider moving ActuDetailPage in 
        /Users/poste5hookipa/sites/frApp4/src/pages/actu-detail/actu-detail.ts to a higher module that imports 
        AppModule in /Users/poste5hookipa/sites/frApp4/src/app/app.module.ts and ActuDetailPageModule in 
        /Users/poste5hookipa/sites/frApp4/src/pages/actu-detail/actu-detail.module.ts. You can also create a new 
        NgModule that exports and includes ActuDetailPage in 
        /Users/poste5hookipa/sites/frApp4/src/pages/actu-detail/actu-detail.ts then import that NgModule in 
        AppModule in /Users/poste5hookipa/sites/frApp4/src/app/app.module.ts and ActuDetailPageModule in 
        /Users/poste5hookipa/sites/frApp4/src/pages/actu-detail/actu-detail.module.ts.

所以我必须取消这样的评论：

@NgModule({
declarations: [
    MyApp,
    HomePage,
    /* AdminPage,
    ActuDetailPage,*/

使用后者我可以部署为 prod，但使用相同的注释，在 dev 中部署会产生错误。如何组织代码以兼容开发和生产？谢谢

【问题讨论】：

你能确定你的ActuDetailPage 实际上不是由两个模块声明的吗？如果是这样，您可以重命名两者之一吗？
它也在actu-detail.module.ts中声明，

标签： angular typescript ionic3

【解决方案1】：

您可以创建一个共享模块，在其中声明页面组件并将其添加到导出数组中

然后在你提到的2个模块中导入共享模块。

像这样：

共享模块：

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    AdminPage,
    ActuDetailPage
  ],
 exports: [
    AdminPage,
    ActuDetailPage
 ]
})
export class SharedModule { }

模块 1 和模块 2：

 @NgModule({
      imports: [
        SharedModule, 
        ...
      ]

【讨论】：

【解决方案2】：

我终于摆脱了这个问题，消息只是说该模块不是任何模块的一部分，并将 actu-detail.ts 放在模块文件中。在ActuDetailPageModule中确实声明了actu-detail.ts，但是在AppModule中没有导入ActuDetailPageModule。

在app.module.ts中，@NgModule中，imports属性是一个模块数组，我简单的添加了AdminPageModule，ActuDetailPageModule来解决问题。

@NgModule({
declarations: [
MyApp,
HomePage,
],
imports: [
AdminPageModule,
ActuDetailPageModule,
....],

【讨论】：