Question:

Hello i am trying to build android application for production using command ionic cordova build android --prod

The problem is that after running this code it is giving me this following typescript error.

typescript error Type ContactPage in C:/Users/Akshay S. Shrivastav/Desktop/vidyotan_2k18/src/pages/contact/contact.ts is part of the declarations of 2 modules: AppModule in C:/Users/Akshay S. Shrivastav/Desktop/vidyotan_2k18/src/app/app.module.ts and ContactPageModule in C:/Users/Akshay S. Shrivastav/Desktop/vidyotan_2k18/src/pages/contact/contact.module.ts! Please consider moving ContactPage in C:/Users/Akshay S. Shrivastav/Desktop/vidyotan_2k18/src/pages/contact/contact.ts to a higher module that imports AppModule in C:/Users/Akshay S. Shrivastav/Desktop/vidyotan_2k18/src/app/app.module.ts and ContactPageModule in C:/Users/Akshay S. Shrivastav/Desktop/vidyotan_2k18/src/pages/contact/contact.module.ts. You can also create a new NgModule that exports and includes ContactPage in C:/Users/Akshay S. Shrivastav/Desktop/vidyotan_2k18/src/pages/contact/contact.ts then import that NgModule in AppModule in C:/Users/Akshay S. Shrivastav/Desktop/vidyotan_2k18/src/app/app.module.ts and ContactPageModule in C:/Users/Akshay S. Shrivastav/Desktop/vidyotan_2k18/src/pages/contact/contact.module.ts. Error: The Angular AoT build failed. See the issues above at C:\Users\Akshay S. Shrivastav\Desktop\vidyotan_2k18\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:237:55 at step (C:\Users\Akshay S. Shrivastav\Desktop\vidyotan_2k18\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:32:23) at Object.next (C:\Users\Akshay S. Shrivastav\Desktop\vidyotan_2k18\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:13:53) at fulfilled (C:\Users\Akshay S. Shrivastav\Desktop\vidyotan_2k18\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:4:58)

This is my app.component.ts

import { Component, ViewChild } from '@angular/core'; import { Nav, Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { HomePage } from '../pages/home/home'; import { EventsPage } from '../pages/events/events'; import { WorkshopsPage } from '../pages/workshops/workshops'; import { TeamPage } from '../pages/team/team'; import { ContactPage } from '../pages/contact/contact'; import { DeveloperPage } from '../pages/developer/developer'; import { WildcardPage } from '../pages/wildcard/wildcard'; // import { DetailsPage } from '../pages/details/details'; @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; rootPage: any = HomePage; pages: Array<{title: string, component: any}>; constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) { this.initializeApp(); //menu navigators this.pages = [ { title: 'Home', component: HomePage }, { title: 'Events', component: EventsPage }, { title: 'Wildcard Entries', component: WildcardPage }, { title: 'Workshops', component: WorkshopsPage }, { title: 'Vidyotan Team', component: TeamPage }, { title: 'Contact', component: ContactPage }, { title: 'App Developer', component: DeveloperPage }, ]; } initializeApp() { this.platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. // this.statusBar.styleDefault(); this.statusBar.backgroundColorByHexString("#337ab7"); this.splashScreen.hide(); }); } openPage(page) { // Reset the content nav to have just this page // we wouldn't want the back button to show in this scenario this.nav.setRoot(page.component); } }

This is my 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 { EventsPage } from '../pages/events/events'; import { WorkshopsPage } from '../pages/workshops/workshops'; import { TeamPage } from '../pages/team/team'; import { ContactPage } from '../pages/contact/contact'; import { DeveloperPage } from '../pages/developer/developer'; import { DetailsPage } from '../pages/details/details'; import { WildcardPage } from '../pages/wildcard/wildcard'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; @NgModule({ declarations: [ MyApp, HomePage, EventsPage, WorkshopsPage, TeamPage, ContactPage, DeveloperPage, DetailsPage, WildcardPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, EventsPage, WorkshopsPage, TeamPage, ContactPage, DeveloperPage, DetailsPage, WildcardPage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {}

This is my contact.ts

import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; // import { Contact1Page } from '../contact/contact'; @IonicPage() @Component({ selector: 'page-contact', templateUrl: 'contact.html', }) export class ContactPage { constructor(public navCtrl: NavController, public navParams: NavParams) { } ionViewDidLoad() { console.log('ionViewDidLoad ContactPage'); } }

This is my contact.module.ts

import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { ContactPage } from './contact'; @NgModule({ declarations: [ ContactPage, ], imports: [ IonicPageModule.forChild(ContactPage), ], }) export class ContactPageModule {}

What might be the problem I am not able to get it. UI have done everything according to me I also searched through various forums but still the same error while building the app for a Production environment.

Please Help, Thanks in advance.

I have faced this issue several times as ionic says a specific page is part of two declarations one is our main app component declarations and the second is individual components modules. So basically removing it from individual component.module.ts file works for me so try removing the page declaration from your contact.module.ts file

@NgModule({ declarations : [ //keep this empty ], imports : [ .... ]

Remove "ContactsPage" from "declaration" and entry "components" in your "AppModule.ts" as it is already imported in "contact.module.ts"

You don't need to declare ContactPage in the app.module.ts file as it is already declared in the contact.module.ts file. So, you have to remove the ContactPage from <strong>declarations</strong> and <strong>entryComponents</strong> in the app.module.ts file.