打字稿错误 – Angular AoT构建失败 – Node.js离子移动应用程序

发布时间：2020-12-17 17:29:42 所属栏目：安全来源：网络整理

导读：我正在尝试创建一个显示随机文本和图片的 Android应用程序(Node.js Ionic)(文本和图片的选择存储在数组中).我正在尝试在手机上安装此应用.该应用适用于Chrome. 当我在命令提示符中给出离子服务命令时,它在Chrome中完美运行,每次按下下一个按钮时,Random1都会

我正在尝试创建一个显示随机文本和图片的 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@ionicapp-scriptsdistaotaot-compiler.js:237:55
    at step (C:/...no
de_modules@ionicapp-scriptsdistaotaot-compiler.js:32:23)
    at Object.next (C:/...node_modules@ionicapp-scriptsdistaotaot-compiler.js:13:53)
    at fulfilled (C:/...node_modules@ionicapp-scriptsdistaotaot-compiler.js:4:58)
    at anonymous

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

enter image description here

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

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,providers: [
    StatusBar,SplashScreen,{provide: ErrorHandler,useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

解决方法

从您的问题来看,我们无法确定您是否要使用延迟加载的页面.如果您确实想使用延迟加载的页面(这样做会提高应用程序的性能),那么以下步骤将帮助您解决问题.

如果您不想在应用中使用延迟加载的页面,请检查@Sampath的答案.

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

@IonicPage() // <-- Here!
@Component({
  selector: 'page-random1',})
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模块的一部分.

现在回到你得到的错误：

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!

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

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler,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
  ],entryComponents: [
    MyApp
    // HomePage,<-- And also from here
    // Random2Page,useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!