Ionic Giving Typescript error while Building

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.

dont declare pages in app module if they are already in the declaration array of the page modules — Suraj Rao
– Suraj Rao, Commented Feb 23, 2018 at 8:47
@SurajRao i am still not able to get it what to do as i am new to it its totally confusing — Developer
– Developer, Commented Feb 23, 2018 at 11:04

Mahesh Jadhav · Accepted Answer · 2018-02-23 18:05:59Z

1

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 : [
   .... 
  ]

answered Feb 23, 2018 at 18:05

Mahesh Jadhav

1,0891 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Developer Over a year ago

Yes this worked perfectly instead i imported all modules and added in the imports section

SaravInfern · Accepted Answer · 2018-02-23 08:53:48Z

1

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

answered Feb 23, 2018 at 8:53

SaravInfern

3,3891 gold badge22 silver badges45 bronze badges

Comments

Setu Kumar Basak · Accepted Answer · 2018-02-23 18:26:10Z

1

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 declarations and entryComponents in the app.module.ts file.

answered Feb 23, 2018 at 18:26

Setu Kumar Basak

12.2k12 gold badges62 silver badges95 bronze badges

Collectives™ on Stack Overflow

Ionic Giving Typescript error while Building

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related