Not able to build Ionic 2 project

Question

I migrated the ionic 2 project to the latest version (ie, 3.0.0). Everything was perfect until, i generated a new page ( DiscountOption ) in the project today. It generated 4 files instead of 3 (*.module.ts is the new one).

Here is my code:

discount-option.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DiscountOption } from './discount-option';

@NgModule({
  declarations: [
    DiscountOption,
  ],
  imports: [
    IonicPageModule.forChild(DiscountOption),
  ],
  exports: [
    DiscountOption
  ]
})
export class DiscountOptionModule { }

app.module.ts

...
import { DiscountOption } from '../pages/orders/biller/discount-option/discount-option';

@NgModule({
  declarations: [
    ...
    DiscountOption
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
    DiscountOption
  ],
  providers: [
    ...
  ]
})
export class AppModule { }

(... code shortened for brevity)

When i tried to build the app using ionic build android --prod

I get this error,

[11:35:52]  ionic-app-script task: "build"
[11:35:52]  Error: Type DiscountOption in E:/TFS
            SOURCE/HMS/HMS.App/eKot/src/pages/orders/biller/discount-option/discount-option.ts is part of the
            declarations of 2 modules: AppModule in E:/TFS SOURCE/HMS/HMS.App/eKot/src/app/app.module.ts and
            DiscountOptionModule in E:/TFS
            SOURCE/HMS/HMS.App/eKot/src/pages/orders/biller/discount-option/discount-option.module.ts! Please consider
            moving DiscountOption in E:/TFS
            SOURCE/HMS/HMS.App/eKot/src/pages/orders/biller/discount-option/discount-option.ts to a higher module that
            imports AppModule in E:/TFS SOURCE/HMS/HMS.App/eKot/src/app/app.module.ts and DiscountOptionModule in E:/TFS
            SOURCE/HMS/HMS.App/eKot/src/pages/orders/biller/discount-option/discount-option.module.ts. You can also
            create a new NgModule that exports and includes DiscountOption in E:/TFS
            SOURCE/HMS/HMS.App/eKot/src/pages/orders/biller/discount-option/discount-option.ts then import that NgModule
            in AppModule in E:/TFS SOURCE/HMS/HMS.App/eKot/src/app/app.module.ts and DiscountOptionModule in E:/TFS
            SOURCE/HMS/HMS.App/eKot/src/pages/orders/biller/discount-option/discount-option.module.ts.
Error: Type DiscountOption in E:/TFS SOURCE/HMS/HMS.App/eKot/src/pages/orders/biller/discount-option/discount-option.ts is part of
 the declarations of 2 modules: AppModule in E:/TFS SOURCE/HMS/HMS.App/eKot/src/app/app.module.ts and DiscountOptionModule in E:/T
FS SOURCE/HMS/HMS.App/eKot/src/pages/orders/biller/discount-option/discount-option.module.ts! Please consider moving DiscountOptio
n in E:/TFS SOURCE/HMS/HMS.App/eKot/src/pages/orders/biller/discount-option/discount-option.ts to a higher module that imports App
Module in E:/TFS SOURCE/HMS/HMS.App/eKot/src/app/app.module.ts and DiscountOptionModule in E:/TFS SOURCE/HMS/HMS.App/eKot/src/page
s/orders/biller/discount-option/discount-option.module.ts. You can also create a new NgModule that exports and includes DiscountOp
tion in E:/TFS SOURCE/HMS/HMS.App/eKot/src/pages/orders/biller/discount-option/discount-option.ts then import that NgModule in App
Module in E:/TFS SOURCE/HMS/HMS.App/eKot/src/app/app.module.ts and DiscountOptionModule in E:/TFS SOURCE/HMS/HMS.App/eKot/src/page
s/orders/biller/discount-option/discount-option.module.ts.
at Error (native)
    at syntaxError (E:\TFS SOURCE\HMS\HMS.App\eKot\node_modules\@angular\compiler\bundles\compiler.umd.js:1513:34)
    at CompileMetadataResolver._addTypeToModule (E:\TFS SOURCE\HMS\HMS.App\eKot\node_modules\@angular\compiler\bundles\compiler.um
d.js:14118:31)
    at E:\TFS SOURCE\HMS\HMS.App\eKot\node_modules\@angular\compiler\bundles\compiler.umd.js:14007:27
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (E:\TFS SOURCE\HMS\HMS.App\eKot\node_modules\@angular\compiler\bundles\compiler
.umd.js:13998:54)
    at addNgModule (E:\TFS SOURCE\HMS\HMS.App\eKot\node_modules\@angular\compiler\bundles\compiler.umd.js:22526:58)
    at E:\TFS SOURCE\HMS\HMS.App\eKot\node_modules\@angular\compiler\bundles\compiler.umd.js:22537:14
    at Array.forEach (native)
    at _createNgModules (E:\TFS SOURCE\HMS\HMS.App\eKot\node_modules\@angular\compiler\bundles\compiler.umd.js:22536:26)

I know this error is due to declaring the module twice in app.module and the newly generated module file. I don't know how to make it work. Any advice would be helpful. Thank you.

Here is my Ionic Info

E:\\TFS SOURCE\\HMS\\HMS.App\\eKot>ionic info

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.0
Xcode version: Not installed

Answer 1

Check the google docs regarding ionic v3 .

Remove any reference to the DiscountOption page from app.module.ts .

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...
  ]
})
export class AppModule { }

Your page will be referenced and declared in page.module.ts

If you are importing the page anywhere else remove it.. use a string equivalent of the class name.Also add @IonicPage() in DiscountOption

@IonicPage()
@Component({
  templateUrl: 'discount-option.html'
})
export class DiscountOption {}

Reference: IonicPage

Answer 2

如果你没有使用Ionic 3延迟加载功能，只需删除你的页面的yourPage.module.ts它是一个可选的 。