CODEWITHSUNDEEP
androidangularionic2
Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1694

Not able to build Ionic 2 project

I migrated the ionic 2 project to the latest version (i.e, 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

Upvotes: 1

Views: 451

Answers (2)

Suraj Rao
Suraj Rao

Reputation: 29614

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

Upvotes: 2

Sampath
Sampath

Reputation: 65870

If you're not using Ionic 3 Lazy Loading feature, Just remove your page's yourPage.module.ts.It is an optional one.

Upvotes: 1

Related Questions