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

Question

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

当我在命令提示符下发出 ionic serve 命令时，它在 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

我从 ionic 应用程序的文件夹中给出了这个命令。此文件夹包含以下文件夹：

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

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

根据您的问题，我们无法确定您是否想要使用延迟加载页面。如果您确实想使用延迟加载页面（这样做会提高应用程序的性能），那么以下步骤将帮助您解决问题。

如果您不想在应用中使用延迟加载页面，请查看@Sampath 的答案。

---

当您在任何页面顶部添加@IonicPage() 时：

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

意味着它将被延迟加载。您还应该在该页面的同一目录中有一个random1.module.ts 文件，如下所示：

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

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

您可以在最后一个文件中看到，Random1Page 是Random1PageModule 模块的一部分。

现在回到您遇到的错误：

打字稿错误 输入 Random1Page C:/.../pages/random1/random1.ts 是2个模块声明的一部分：AppModule在 C:/.../app/app.module.ts 和 Random1PageModule 在 C:/.../pages/random1/random1.module.ts!

因此，为了修复它，您需要从位于 app.module.ts 文件中的 AppModule 中删除该页面（以及所有其他延迟加载页面）：

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

您可以在 Ionic 博客中找到有关延迟加载的更多信息：

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

Answer 2

由于您使用了最新的 CLI ionic generate page Random1Page，它会为您创建一个延迟加载的模块。那是Random1PageModule。您的应用似乎没有使用延迟加载。所以删除那个模块。即Random1PageModule 在您的页面文件夹下。

以后当你创建一个页面时，如果你不需要使用延迟加载页面，你可以使用这个CLI。

ionic generate page Random1Page --no-module

注意：我强烈建议您使用延迟加载。它将为您的应用带来巨大的性能提升。

您可以在此处阅读有关lazy loading 的更多信息。

Answer 3

试试下面的命令：

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

它奏效了。

另外，如果不工作则尝试降级 package.json 中的 app-script 依赖项，如下所示：

来自

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

到

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