修改

Question

当我尝试构建我的app的--prod Android版本时，我会因为离子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 App [{1}}
转到应用文件夹ionic start myStackApp tabs
在浏览器中测试应用cd myStackApp =＆gt;应用程序运行正常
编译--prod build ionic serve =＆gt;没有错误
生成新页面ionic cordova build android --release --prod
修改app.module.ts
编辑home.ts
修改home.html
在浏览器中测试应用ionic g page Test =＆gt;应用程序运行正常
编译--prod build ionic serve =＆gt; Ooooops！

错误出现在控制台中。

编辑后的文件：

app.module.ts

ionic cordova build android --release --prod

home.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.html的

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);
  }

}

我的问题：

我做错了什么？
我不明白吗？

提前致谢！

修改

test.ts

<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.module.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');
  }

}

Answer 1

所以我在构建生产时遇到了同样的错误，我通过删除所有不同的组件/页面.module.ts来修复它，然后从我的所有组件中删除了@IonicPage()。例如， test.ts 将变为： -

 import { Component } from '@angular/core';
import {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.
 */
@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。似乎当前的离子-cli构建用于释放＆amp;生产不支持多模（子模块）。

所以我一直在研究离子3中的延迟加载，所以我终于找到了另一种更好的方法来使用@IonicPage和构建生产。这是我的离子版信息。

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : https://registry.npmjs.org/@ionic/app-scripts/-/app-scripts-1.3.7.tgz
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular https://registry.npmjs.org/ionic-angular/-/ionic-angular-3.2.1.tgz

System:

    Node       : v7.4.0
    OS         : Linux 4.6
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.0

所以在你的函数goToTestPage() above, you would change the this.navParams.push（TestPage）to this.navParams.push（＆＃39; TestPage＆＃39;）;`将页面作为字符串。这安全地实现了延迟加载。有关延迟加载离子3的更多信息，请参考此youtube tutorial。

错误：[somePath]中的[somePage]类型是2个模块的声明的一部分

错误：