构建时Ionic Giving Typescript错误 [英] Ionic Giving Typescript error while Building

问题描述

您好我正在尝试使用命令构建Android应用程序生成命令离子cordova构建android --prod

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)

这是我的 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);
}
}

这是我的应用程序。 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 {}

这是我的 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');
      }

    }

这是我的 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 {}

什么可能是我无法解决的问题。 UI已根据我做了所有事情我也搜索了各种论坛，但在为生产环境构建应用程序时仍然出现同样的错误。

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.

推荐答案

我已经多次面对这个问题，因为离子说特定页面是两个声明的一部分，一个是我们的主要应用程序组件声明和第二个是单个组件模块。
所以基本上从个人component.module.ts文件中删除它对我来说很有用，所以尝试从你的contact.module.ts文件中删除页面声明

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

这篇关于构建时Ionic Giving Typescript错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！