Ionic Giving Typescript error while Building

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.

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

回答2:

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

回答3:

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.