2017-04-07 127 views
1

我將ionic 2項目遷移到最新版本(即3.0.0)。一切都很完美,直到我今天在項目中生成了一個新頁面(DiscountOption)。它生成4個文件而不是3個(* .module.ts是新的)。無法構建Ionic 2項目

這裏是我的代碼:

量販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 { } 

(...代碼縮短簡潔)

當我試圖建立應用程序使用ionic build android --prod

我得到這個錯誤,

[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) 

我知道這個錯誤是由於在申報兩次app.module模塊和新生成的模塊文件。我不知道如何使它工作。任何意見將是有益的。謝謝。

這裏是我的離子信息

E:\ TFS SOURCE \ HMS \ HMS.App \ eKot>離子信息

系統信息:

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 

回答

2

檢查google docs regarding ionic v3

app.module.ts刪除對DiscountOption頁面的任何引用。

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

您的網頁會被引用,並在page.module.ts

如果要導入的頁面其他地方將其刪除..使用等效字符串類的name.Also添加@IonicPage()聲明在DiscountOption

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

參考:IonicPage

+0

感謝您的回覆,我刪除了引用,並且構建了該項目。但是當我在設備上運行它時,頁面不顯示。當我在瀏覽器中使用它時,控制檯顯示錯誤'沒有找到DiscountOption的組件工廠。你把它添加到@ NgModule.entryComponents?'。我需要在app.module.ts中引用它,這與答案直接矛盾! –

+0

你在app.component.ts中導入了頁面嗎? –

+0

可以肯定的是,它是app.component.ts還是app.module.ts? –

1

如果你不ü唱Ionic 3懶惰加載功能,只需刪除你的網頁的yourPage.module.ts。它是一個可選之一。

+0

只是好奇你對懶惰加載功能有什麼看法? –

+0

請參閱此文檔:https://docs.google.com/document/d/1vGokwMXPQItZmTHZQbTO4qwj_SQymFhRS_nJmiH0K3w/edit#heading=h.yw70uq35xyz8 @suraj – Sampath

+0

我已閱讀它..我在我的答案中引用它:) ..不確定關於將每個頁面/組件轉換爲其自己的模塊雖然.. –