gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 17:45:13 24 4
gpt4 key购买 nike

我正在尝试创建一个显示随机文本和图片的 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 应用程序的文件夹中发出了这个命令。此文件夹包含以下文件夹:

enter image description here

这是发出此命令的正确文件夹吗?

随机1.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);
}
}
}

应用程序模块.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 {}

最佳答案

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

如果您不想在您的应用中使用延迟加载页面,请改为查看@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 {}

正如您在最后一个文件中看到的,Random1PageRandom1PageModule 模块 的一部分。

现在回到您遇到的错误:

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.tsAppModule 中删除该页面(以及所有其他延迟加载的页面) > 文件:

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 博客中找到有关延迟加载的更多信息:

关于angular - Typescript 错误 - Angular AoT 构建失败 - Node.js + Ionic 移动应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47853157/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com