Page是2个模块声明的一部分:离子生成错误

时间:2017-09-11 15:58:03

标签: angular typescript ionic-framework ionic2 ionic3

当我运行 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 {

}

3 个答案:

答案 0 :(得分:8)

这是角度的基本误差。您可以看到问题here。所以到目前为止接受的答案是使用共享模块。你可以这样做:
  - 创建share.module.ts
  - Import

中的declarationexportshare.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 {}


- 如果要在离子页面(延迟加载页面)中使用组件,请在该离子页面的模块中导入共享模块:

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


- 如果您想在其他组件中使用您的组件或不延迟加载页面,请在 app.module.ts 中导入共享模块,如上所述。
详细了解ngModule

答案 1 :(得分:2)

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

因此,我认为最好的方法是从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 {

}

患者模块

i.e.  select count(*) from sales where userId=@userId and status='approved'

答案 2 :(得分:1)

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

another.module.ts

import

使用Cordova builds

@NgModule({
     imports: [
        PatientDetailPageModule,
      ], 
})