Question

我正在尝试创建一个显示随机文本和图片的Android应用程序（Node.js + Ionic）（文本和图片的选择存储在数组中）。我正在尝试在手机上安装此应用。该应用适用于Chrome。

当我在命令提示符下给出离子服务命令时，它在Chrome中完美运行，每当我按下一个按钮时，Random1会给出随机文本和随机图片，每次推送下一个按钮时，Random2只给出一个随机图片按钮。当我在命令提示符下给出“ionic cordova run android --prod --release”命令时，我收到此错误：

[16:54:50]  build prod started ...
[16:54:50]  clean started ...
[16:54:50]  clean finished in 6 ms
[16:54:50]  copy started ...
[16:54:50]  deeplinks started ...
[16:54:50]  deeplinks finished in 84 ms
[16:54:50]  ngc started ...
[16:55:02]  typescript error
            Type Random1Page in
            C:/.../pages/random1/random1.ts is part of the declarations of 2 modules: AppModule in
            C:/.../app/app.module.ts and
            Random1PageModule in
            C:/.../pages/random1/random1.module.ts!
            Please consider moving Random1Page in
            C:/.../pages/random1/random1.ts to a higher module that imports AppModule in
            C:/.../app/app.module.ts and Random1PageModule in
            C:/.../pages/random1/random1.module.ts. You
            can also create a new NgModule that exports and includes Random1Pag
e in C:/.../pages/random1/random1.ts then import that NgModule in AppModule in
            C:/.../app/app.module.ts and
            Random1PageModule in
            C:/.../pages/random1/random1.module.ts.
Typescript error - Error: The Angular AoT build failed. See the issues above
    at C:/...\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:237:55
    at step (C:/...\no
de_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
    at Object.next (C:/...\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
    at fulfilled (C:/...\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:4:58)
    at anonymous

我从离子应用程序的文件夹中提供了此命令。此文件夹包含以下文件夹：

这是给出此命令的正确文件夹吗？

random1.ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Random2Page } from '../random2/random2';

@IonicPage()
@Component({
  selector: 'page-random1',
  templateUrl: 'random1.html',
})
export class Random1Page {
  random1_arr: string[]= ["text1", "text2", "text3"];
  random1_act: string;
  image_arr: string[]= ["../assets/imgs/Pic1.jpg", "../assets/imgs/Pic2.jpg"];
  image_act: string;
  person_arr: string[]= ["person1", "person2"];
  person_act: string;
  person_not_act: string;
  counter= 0;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.image_act= '';
    let random_index= Math.floor(Math.random() * 2);
    this.person_act= this.person_arr[random_index];
    this.person_not_act= this.person_arr[random_index? 0: 1];
    this.GenerateRandom1PicturePerson();
  }

  GenerateRandom1PicturePerson() {
    this.random1_act= this.random1_arr[Math.floor(Math.random() * this.random1_arr.length)];
    this.image_act= this.image_arr[Math.floor(Math.random() * this.image_arr.length)];
    this.person_act= [this.person_not_act, this.person_not_act= this.person_act][0];
    this.counter++;

    if(this.counter >= 7) {
      this.navCtrl.push(Random2Page);
    }
  }
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { Random1Page } from '../pages/random1/random1';
import { Random2Page } from '../pages/random2/random2';
import { LoggedinPage } from '../pages/loggedin/loggedin';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    Random1Page,
    Random2Page,
    LoggedinPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    Random1Page,
    Random2Page,
    LoggedinPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Answer 1

From your question, we can't be sure if you want to use Lazy-loaded pages or not. If you do want to use lazy-loaded pages (doing this will increase the performance of the app) then the following steps will help you fixing the issue.

If you don't want to use lazy-loaded pages in your app, check @Sampath's answer instead.

When you add @IonicPage() on top of any of your pages:

@IonicPage() // <-- Here!
@Component({
  selector: 'page-random1',
  templateUrl: 'random1.html',
})
export class Random1Page { ... }

means that it would be lazy loaded. You also should have a random1.module.ts file in the same directory of that page, like this:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Random1Page } from './random1';

@NgModule({
  declarations: [
    Random1Page,
  ],
  imports: [
    IonicPageModule.forChild(Random1Page),
  ],
})
export class Random1PageModule {}

As you can see in that last file, Random1Page is part of the Random1PageModule module.

Now getting back to the error you're getting:

typescript error Type Random1Page in C:/.../pages/random1/random1.ts is part of the declarations of 2 modules: AppModule in C:/.../app/app.module.ts and Random1PageModule in C:/.../pages/random1/random1.module.ts!

So in order to fix it, you would need to remove that page (and every other lazy-loaded page) from the AppModule located in the app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp
    // HomePage,
    // ListPage,
    // Random1Page, <-- Remove it from here
    // Random2Page,
    // LoggedinPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
    // HomePage,
    // ListPage,
    // Random1Page, <-- And also from here
    // Random2Page,
    // LoggedinPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

You can find more information about lazy-loading in the Ionic blog:

Ionic and Lazy Loading Pt 1
Ionic and Lazy Loading Pt 2

Answer 2

Since you have used latest CLI ionic generate page Random1Page, it creates a lazy loaded module for you. That is Random1PageModule. It seems you're not using lazy loading on your app. So delete that module.i.e. Random1PageModule under your page's folder.

Hereafter when you create a page you can use this CLI if you don't need to use Lazy loading pages.

ionic generate page Random1Page --no-module

Note: I highly suggest you to use Lazy loading. It'll give huge performance boost to your app.

Here you can read more about lazy loading.

Answer 3

尝试以下命令：

npm install @ionic/app-scripts@latest --save-dev

它奏效了。

也不能正常工作，请尝试降级package.json中的应用脚本依赖项，如下所示：

来自

"@ionic/app-scripts": "3.2.4"

到

"@ionic/app-scripts": "3.2.3"

打字稿错误 - Angular AoT构建失败 - Node.js + Ionic移动应用程序

3 个答案: