74653

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.

Answer1:

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

Answer2:

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

Answer3:

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.

Recommend

  • Angular2 Ionic2 Native error deviceready did not fire within ms
  • React native navigation is not working on TouchableOpacity
  • IBM Worklight - How to programmatically hide the splash image
  • Camera.takePicture throws RunTimeException
  • Using ViewPager with Tabs without actionBar
  • How to assign a prop value to a state in react
  • ngx bootstrap: How to get data from nested Modal?
  • Unable to get hold of child DOM element
  • ionic slide menu don't appear when i use state.go in my controller
  • @viewChild return undefined
  • TabBarController: Orienting views in different orientations
  • Yii2 disable highlighting menu item
  • UWP navigation (Template10), Pivot control, multiple frames
  • Declaration of does not work with Ionic's ion-nav-view in IBM MobileFirst
  • How to have a website splash screen (web app)
  • Accessing 3rd level of JSON with Angular ng-repeat
  • Consuming a web service with the Netbeans Platform
  • Slicing an SPA into several components and use AngularJS
  • to implement a spinner in angular2+
  • Angular2 - Template reference inside NgSwitch
  • How to use Windows Media Foundation with UWP without a topology
  • Can't remove headers after they are sent
  • Angular2 component view does not update on value change via method
  • CakePHP ACL tutorial initDB function warnings
  • How to use JavaScript to determine whether a file exists in a directory?
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • x64 applications using gdi+: what are the consequences on performance?
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Typescript - Unable to get 'import' statement to function
  • Meteor helpers not available in Angular template
  • If I include Java 8 in my Android app does that affect which devices it will work on?
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Align navbar back button on right side
  • Window Size for Mac application
  • Updating server-side rendering client-side
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • SetUp method failed while running tests from teamcity
  • Understanding cpu registers
  • How to push additional view controllers onto NavigationController but keep the TabBar?