页面是 2 个模块声明的一部分：Error in ionic build prod

Posted 2023-03-13

【中文标题】页面是 2 个模块声明的一部分：Error in ionic build prod

【英文标题】：Page is part of the declarations of 2 modules: Error in ionic build prod

【发布时间】：2018-02-19 22:28:47

【问题描述】：

当我运行 npm run ionic:build 时，我能够成功构建。但是当我运行 npm run ionic:build --prod 时，我收到以下错误消息。

Error: Type PatientDetailPage in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.ts is 
            part of the declarations of 2 modules: AppModule in /home/shiva/Ionic/af2-lists/src/app/app.module.ts and 
            PatientDetailPageModule in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.module.ts! 
            Please consider moving PatientDetailPage in 
            /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.ts to a higher module that imports 
            AppModule in /home/shiva/Ionic/af2-lists/src/app/app.module.ts and PatientDetailPageModule in 
            /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.module.ts. You can also create a new 
            NgModule that exports and includes PatientDetailPage in 
            /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.ts then import that NgModule in 
            AppModule in /home/shiva/Ionic/af2-lists/src/app/app.module.ts and PatientDetailPageModule in 
            /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.module.ts. 
Error: Type PatientDetailPage in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.ts is part of the declarations of 2 modules: AppModule in /home/shiva/Ionic/af2-lists/src/app/app.module.ts and PatientDetailPageModule in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.module.ts! Please consider moving PatientDetailPage in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.ts to a higher module that imports AppModule in /home/shiva/Ionic/af2-lists/src/app/app.module.ts and PatientDetailPageModule in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.module.ts. You can also create a new NgModule that exports and includes PatientDetailPage in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.ts then import that NgModule in AppModule in /home/shiva/Ionic/af2-lists/src/app/app.module.ts and PatientDetailPageModule in /home/shiva/Ionic/af2-lists/src/pages/patient-detail/patient-detail.module.ts.
    at syntaxError (/home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:1550:34)
    at CompileMetadataResolver._addTypeToModule (/home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:14655:31)
    at /home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:14543:27
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (/home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:14534:54)
    at addNgModule (/home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:23050:58)
    at /home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:23061:14
    at Array.forEach (native)
    at _createNgModules (/home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:23060:26)
    at analyzeNgModules (/home/shiva/Ionic/af2-lists/node_modules/@angular/compiler/bundles/compiler.umd.js:22935:14)

我知道我多次加载相同的模块，但不知道如何删除它们。

我的 app.module.ts

@NgModule(
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireDatabaseModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireOfflineModule,
    IonicStorageModule.forRoot()
   // PatientDetailPage

  ],
  declarations: [
    MyApp,
    HomePage,
    PatientDetailPage
  ],
  entryComponents: [
    MyApp,
    HomePage,
    PatientDetailPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    //AngularFireModule,
    //Storage,
    provide: ErrorHandler, useClass: IonicErrorHandler
  ],
   bootstrap: [IonicApp],
)

patient-detail.module.ts 是

import  NgModule  from '@angular/core';
import  IonicPageModule  from 'ionic-angular';
import  PatientDetailPage  from './patient-detail';

@NgModule(
  declarations: [
    PatientDetailPage,
  ],
  imports: [
    IonicPageModule.forChild(PatientDetailPage),
  ]

)
export class PatientDetailPageModule 

【参考方案1】：

这是角度的基本错误。你可以看到问题here。所以到目前为止接受的答案是使用共享模块。你可以这样做： - 创建share.module.ts - Import、declaration 和 export 您在此 share.module.ts 中的组件

import  NgModule        from '@angular/core';
import SharedComponentA from "./SharedComponentA";
import SharedComponentB from "./SharedComponentB";

@NgModule(
    imports: [
    ],
    declarations: [
      SharedComponentA,
      SharedComponentB

    ],
    providers: [
    ],
    exports: [
      SharedComponentA,
      SharedComponentB
    ]
)
export class SharedModule 

- 如果你想在 Ionic 页面（延迟加载页面） 中使用你的组件，请在该 Ionic 页面的模块中导入共享模块：

import SharedModule  from './SharedModule';
@NgModule(
    imports: [
        SharedModule    
        //..
    ],
    //..
)

- 如果您想在其他组件或无延迟加载页面中使用您的组件，请像上面一样在您的 app.module.ts 中导入共享模块。 查看更多关于ngModule

【参考方案2】：

如果您在模块中使用组件作为 entryComponent，则无需在模块中声明它。尝试从app.module.ts 上的declarations 中删除PatientDetailPage。

因此，在我看来，最好的方法是将export 你的PatientDetailPage 从你的PatientDetailModule 中导出，然后将PatientDetailModule 导入你的应用模块。

应用模块

@NgModule(
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireDatabaseModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireOfflineModule,
    PatientDetailModule,
    IonicStorageModule.forRoot()
   // PatientDetailPage

  ],
  declarations: [
    MyApp,
    HomePage
  ],
  entryComponents: [
    MyApp,
    HomePage,
    PatientDetailPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    //AngularFireModule,
    //Storage,
    provide: ErrorHandler, useClass: IonicErrorHandler
  ],
   bootstrap: [IonicApp],
)

患者模块

import  NgModule  from '@angular/core';
import  IonicPageModule  from 'ionic-angular';
import  PatientDetailPage  from './patient-detail';

@NgModule(
  declarations: [
    PatientDetailPage,
  ],
  imports: [
    IonicPageModule.forChild(PatientDetailPage),
  ],
  exports: [
    PatientDetailPage
  ]

)
export class PatientDetailPageModule 

【讨论】：

如果我删除 PatienctDetailPage，我只能在浏览器中看到空白页面。

我更新了我的答案。我认为最好的办法是将您的 PatientDetailModule 导入您的 App Module 并导出您的 PatientDetailPage 组件。

【参考方案3】：

您不需要在app.module.ts 上声明任何关于PatientDetailPageModule 的内容。因此请删除对它的所有引用。如果您需要在另一个组件中使用PatientDetailPageModule 模块，则只需import，如下所示。

另一个.module.ts

@NgModule(
     imports: [
        PatientDetailPageModule,
      ], 
)

使用Cordova builds:

ionic cordova build android --prod