【发布时间】：2017-06-28 19:58:47
【问题描述】：
当我尝试构建我的应用程序的 --prod Android 版本时遇到的 ionic 3 错误，我快疯了。
错误：
Running app-scripts build: --prod --iscordovaserve --externalIpRequired --nobrowser
[21:21:54] build prod started ...
[21:21:54] clean started ...
[21:21:54] clean finished in 2 ms
[21:21:54] copy started ...
[21:21:54] ngc started ...
[WARN] Error occurred during command execution from a CLI plugin
(@ionic/cli-plugin-cordova). Your plugins may be out of date.
Error: Type TestPage in
/Users/sergidb/Desktop/Borrar/myStackApp/src/pages/test/test.ts is part of the
declarations of 2 modules: AppModule in
/Users/sergidb/Desktop/Borrar/myStackApp/src/app/app.module.ts
and TestPageModule in
/Users/sergidb/Desktop/Borrar/myStackApp/src/pages/test/test.module.ts!
Please consider moving TestPage in
/Users/sergidb/Desktop/Borrar/myStackApp/src/pages/test/test.ts
to a higher module that imports AppModule in
/Users/sergidb/Desktop/Borrar/myStackApp/src/app/app.module.ts
and TestPageModule in
/Users/sergidb/Desktop/Borrar/myStackApp/src/pages/test/test.module.ts.
You can also create a new NgModule that exports and includes TestPage in
/Users/sergidb/Desktop/Borrar/myStackApp/src/pages/test/test.ts then import
that NgModule in AppModule in
/Users/sergidb/Desktop/Borrar/myStackApp/src/app/app.module.ts and
TestPageModule in
/Users/sergidb/Desktop/Borrar/myStackApp/src/pages/test/test.module.ts.
重现步骤
- 创建一个新的 Ionic 应用程序
ionic start myStackApp tabs - 进入应用文件夹
cd myStackApp - 在浏览器中测试应用
ionic serve=> 应用正常 - 编译 --prod build
ionic cordova build android --release --prod=> 没有错误 - 生成新页面
ionic g page Test - 编辑 app.module.ts
- 编辑 home.ts
- 编辑 home.html
- 在浏览器中测试应用
ionic serve=> 应用正常 - 编译 --prod build
ionic cordova build android --release --prod=> 哎呀！
错误出现在控制台中。
编辑后的文件：
app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { TestPage } from '../pages/test/test';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
TestPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
TestPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TestPage } from '../test/test';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
goToTest(){
this.navCtrl.push(TestPage);
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
<button ion-button (click)="goToTest()">Go!</button>
</ion-content>
我的问题：
- 我做错了什么？
- 我是不是有些不懂？
提前致谢！
编辑
test.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the TestPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-test',
templateUrl: 'test.html',
})
export class TestPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad TestPage');
}
}
test.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TestPage } from './test';
@NgModule({
declarations: [
TestPage,
],
imports: [
IonicPageModule.forChild(TestPage),
],
exports: [
TestPage
]
})
export class TestPageModule {}
【问题讨论】：
-
您的其他页面是否在顶部有@IonicPage 和独立的.modules.ts 文件
-
@IzzoObella 是的，
ionic g page PageName生成 4 个文件：.html、.ts、.scss 和 .module.ts -
@IzzoObella 我编辑了帖子添加了 test.ts 和 test.module.ts 文件
标签： android cordova ionic-framework build