Search code examples
angulartypescriptionic-frameworkionic2ionic3

Typescript error - The Angular AoT build failed - Node.js + Ionic mobile app

I'm trying to create an Android app (Node.js + Ionic) that shows random text and pictures (the selection of texts and pictures are stored in arrays). I'm trying to install this app on my phone. The app works in Chrome.

When I give the ionic serve command in the command prompt, it works perfectly in Chrome, Random1 gives a random text and a random picture every time I push the next button, Random2 only gives a random picture every time I push the next button. When I give the "ionic cordova run android --prod --release" command in the command prompt, I get this error:

[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

I gave this command from the folder of the ionic app. This folder contains these folders:

enter image description here

Is this the right folder to give this command?

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

Solution

  • 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: