ส่วนประกอบเป็นส่วนหนึ่งของการประกาศ 2 โมดูล

ฉันพยายามสร้างแอปไอออนิก 2 เมื่อฉันลองใช้แอปในเบราว์เซอร์ที่มีไอออนิกให้บริการหรือเปิดใช้งานบนโปรแกรมจำลองทุกอย่างทำงานได้ดี

แต่เมื่อลองสร้างทุกครั้งก็เกิดข้อผิดพลาด

ionic-app-script tast: "build"
Error Type AddEvent in "PATH"/add.event.ts is part of the declarations of 2 modules: AppModule in "PATH"/app.modules.ts and AddEvent in "PATH"/add-event.module.ts.
Please consider moving AddEvent in "PATH"/add-event.ts to a higher module that imports AppModule in "PATH"/app.module.ts and AddEventModule.
You can also creat a new NgModule that exports and includes AddEvent then import that NgModule in AppModule and AddEventModule

AppModule ของฉันคือ

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { AngularFireModule } from 'angularfire2';
import { MyApp } from './app.component';
import { Eventdata } from '../providers/eventdata';
import { AuthProvider } from '../providers/auth-provider';
import { HttpModule } from '@angular/http';

import { HomePage } from '../pages/home/home';
import { Login } from '../pages/login/login';
import { Register } from '../pages/register/register';
import { AddEvent } from '../pages/add-event/add-event';
import { EventDetails } from '../pages/event-details/event-details';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Login,
    Register,
    AddEvent,
    EventDetails

  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    AngularFireModule.initializeApp(config)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Login,
    Register,
    AddEvent,
    EventDetails
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}, Eventdata, AuthProvider
  ]
})
export class AppModule {}

และ add-event.module.ts ของฉันคือ

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AddEvent } from './add-event';

@NgModule({
  declarations: [
    AddEvent,
  ],
  imports: [
    IonicPageModule.forChild(AddEvent),
  ],
  exports: [
    AddEvent
  ]
})
export class AddEventModule {}

ฉันเข้าใจว่าฉันต้องลบการประกาศอย่างใดอย่างหนึ่ง แต่ฉันไม่รู้วิธี

หากฉันลบการประกาศออกจาก AppModule ฉันได้รับข้อผิดพลาดว่าไม่พบหน้าการเข้าสู่ระบบขณะเรียกใช้บริการไอออนิก

ลบการประกาศออกAppModuleแต่อัปเดตการAppModuleกำหนดค่าเพื่อนำเข้าAddEventModuleไฟล์.

.....
import { AddEventModule } from './add-event.module';  // <-- don't forget to import the AddEventModule class

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Login,
    Register,
    //AddEvent,  <--- remove this
    EventDetails

  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    AngularFireModule.initializeApp(config),
    AddEventModule,  // <--- add this import here
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Login,
    Register,
    AddEvent,
    EventDetails
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}, Eventdata, AuthProvider
  ]
})
export class AppModule {}

นอกจากนี้

โปรดทราบว่าสิ่งสำคัญคือคุณต้องAddEventModuleส่งออกAddEventส่วนประกอบหากคุณต้องการใช้งานนอกโมดูลนั้น โชคดีที่คุณได้กำหนดค่าไว้แล้ว แต่ถ้าถูกละไว้คุณจะได้รับข้อผิดพลาดหากคุณพยายามใช้AddEventส่วนประกอบในส่วนประกอบอื่นของคุณAppModule

บางคนที่ใช้Lazy loadingจะสะดุดในหน้านี้

นี่คือสิ่งที่ฉันได้แก้ไขร่วมกันสั่ง

1. สร้างโมดูลที่ใช้ร่วมกันใหม่

shared.module.ts

import { NgModule, Directive,OnInit, EventEmitter, Output, OnDestroy, Input,ElementRef,Renderer } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SortDirective } from './sort-directive';

@NgModule({
  imports: [
  ],
  declarations: [
  SortDirective
  ],
  exports: [
    SortDirective
  ]
})

export class SharedModule { }

จากนั้นใน app.module และโมดูลอื่น ๆ ของคุณ

import {SharedModule} from '../directives/shared.module'
...

@NgModule({
   imports: [
       SharedModule
       ....
       ....
 ]
})
export class WhateverModule { }

วิธีแก้ปัญหาง่ายมาก ค้นหา*.module.tsไฟล์และการประกาศความคิดเห็น ในกรณีของคุณให้ค้นหาaddevent.module.tsไฟล์และลบ / แสดงความคิดเห็นหนึ่งบรรทัดด้านล่าง:

@NgModule({
  declarations: [
    // AddEvent, <-- Comment or Remove This Line
  ],
  imports: [
    IonicPageModule.forChild(AddEvent),
  ],
})

โซลูชันนี้ทำงานในไอออนิก 3 สำหรับเพจที่สร้างโดยไอออนิก - คลิและทำงานได้ทั้งสองอย่างionic serveและionic cordova build android --prod --releaseคำสั่ง!

มีความสุข ...

ในเชิงมุม 4 ข้อผิดพลาดนี้ถือเป็นปัญหาแคชเวลารัน

กรณี: 1 ข้อผิดพลาดนี้จะเกิดขึ้นเมื่อคุณนำเข้าส่วนประกอบในโมดูลหนึ่งและจะนำเข้าอีกครั้งในโมดูลย่อย

กรณี: 2 นำเข้าคอมโพเนนต์หนึ่งในตำแหน่งที่ไม่ถูกต้องและนำออกและแทนที่ในโมดูลที่ถูกต้องคราวนั้นจะถือว่าเป็นปัญหาแคชที่ให้บริการ จำเป็นต้องหยุดโปรเจ็กต์และเริ่ม -do อีกครั้งมันจะทำงานได้ตามที่คาดไว้

หากเพจของคุณถูกสร้างโดยใช้ CLI มันจะสร้างไฟล์ที่มีfilename.module.tsคุณต้องลงทะเบียนfilename.module.tsของคุณในการนำเข้าอาร์เรย์ในไฟล์ app.module.ts และอย่าแทรกหน้านั้นในอาร์เรย์การประกาศ .

เช่น.

import { LoginPageModule } from '../login/login.module';


declarations: [
    MyApp,
    LoginPageModule,// remove this and add it below array i.e. imports
],

imports: [
        BrowserModule,
        HttpModule,
        IonicModule.forRoot(MyApp, {
           scrollPadding: false,
           scrollAssist: true,
           autoFocusAssist: false,
           tabsHideOnSubPages:false
        }),
       LoginPageModule,
],

โมดูลนี้จะถูกเพิ่มโดยอัตโนมัติเมื่อคุณเรียกใช้คำสั่งไอออนิก อย่างไรก็ตามมันไม่จำเป็น ดังนั้นทางเลือกอื่นคือการลบadd-event.module.tsจากโปรเจ็กต์

คุณอาจลองใช้วิธีนี้ (สำหรับ Ionic 3)

ในกรณีของฉันข้อผิดพลาดนี้เกิดขึ้นเมื่อฉันเรียกเพจโดยใช้รหัสต่อไปนี้

 this.navCtrl.push("Login"); // Bug

ฉันเพิ่งลบเครื่องหมายคำพูดดังต่อไปนี้และนำเข้าหน้านั้นที่ด้านบนของไฟล์ที่ฉันใช้เรียกหน้าเข้าสู่ระบบ

this.navCtrl.push (เข้าสู่ระบบ); // ถูกต้อง

ฉันไม่สามารถอธิบายความแตกต่างได้ในตอนนี้เนื่องจากฉันเป็นนักพัฒนาระดับเริ่มต้น

ตั้งแต่ Ionic 3.6.0เผยแพร่ทุกเพจที่สร้างโดยใช้ Ionic-CLI จึงเป็นโมดูล Angular ซึ่งหมายความว่าคุณต้องเพิ่มโมดูลในการนำเข้าของคุณในไฟล์src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { ErrorHandler, NgModule } from "@angular/core";
import { IonicApp, IonicErrorHandler, IonicModule } from "ionic-angular";
import { SplashScreen } from "@ionic-native/splash-screen";
import { StatusBar } from "@ionic-native/status-bar";;

import { MyApp } from "./app.component";
import { HomePage } from "../pages/home/home"; // import the page
import {HomePageModule} from "../pages/home/home.module"; // import the module

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HomePageModule // declare the module
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage, // declare the page
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
  ]
})
export class AppModule {}

หากต้องการเกินข้อผิดพลาดนี้คุณควรเริ่มต้นด้วยการลบการนำเข้า app.module.ts ทั้งหมดและมีดังนี้:

            import { BrowserModule } from '@angular/platform-browser';
            import { HttpClientModule } from '@angular/common/http';
            import { ErrorHandler, NgModule } from '@angular/core';
            import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
            import { SplashScreen } from '@ionic-native/splash-screen';
            import { StatusBar } from '@ionic-native/status-bar';

            import { MyApp } from './app.component';


            @NgModule({
              declarations: [
                MyApp
              ],
              imports: [
                BrowserModule,
                HttpClientModule,
                IonicModule.forRoot(MyApp)
              ],
              bootstrap: [IonicApp],
              entryComponents: [
                MyApp
              ],
              providers: [
                StatusBar,
                SplashScreen,
                {provide: ErrorHandler, useClass: IonicErrorHandler}
              ]
            })
            export class AppModule {}

ถัดไปแก้ไขโมดูลหน้าของคุณดังนี้:

            import { NgModule } from '@angular/core';
            import { IonicPageModule } from 'ionic-angular';
            import { HomePage } from './home';

            @NgModule({
              declarations: [
                HomePage,
              ],
              imports: [
                IonicPageModule.forChild(HomePage),
              ],
              entryComponents: [HomePage]
            })
            export class HomePageModule {}

จากนั้นเพิ่มคำอธิบายประกอบของ IonicPage ก่อนคำอธิบายประกอบของหน้าทั้งหมด:

import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

จากนั้นแก้ไขประเภท rootPage ของคุณให้เป็นสตริงและลบการนำเข้าของเพจ (หากมีในส่วนประกอบแอพของคุณ)

rootPage: string = 'HomePage';

จากนั้นฟังก์ชันการนำทางควรเป็นดังนี้:

 /**
* Allow navigation to the HomePage for creating a new entry
*
* @public
* @method viewHome
* @return {None}
*/
 viewHome() : void
 {
  this.navCtrl.push('HomePage');
 }

คุณสามารถค้นหาแหล่งที่มาของโซลูชันนี้ได้ที่นี่: ส่วนประกอบเป็นส่วนหนึ่งของการประกาศ 2 โมดูล

แก้ไขได้ - ส่วนประกอบเป็นส่วนหนึ่งของการประกาศ 2 โมดูล

1. ลบไฟล์ pagename.module.ts ในแอพ
2. ลบการนำเข้า {IonicApp} จาก "ionic-angular"; ในไฟล์ pagename.ts
3. ลบ @IonicPage () ออกจากไฟล์ pagename.ts

และเรียกใช้คำสั่งionic cordova สร้าง android --prod - ปล่อย มันทำงานในแอพของฉัน

มีปัญหาเดียวกัน ตรวจสอบให้แน่ใจว่าได้ลบทุกโมดูลใน "การประกาศ" แต่ AppModule

ทำงานให้ฉัน

แก้ไขง่ายๆ

ไปที่app.module.tsไฟล์และทุกอย่างที่ผูกกับremove/comment add_eventไม่จำเป็นต้องเพิ่มส่วนประกอบให้กับApp.module.ts ซึ่งสร้างขึ้นโดยionic cliเนื่องจากสร้างโมดูลแยกต่างหากสำหรับส่วนประกอบที่เรียกว่าcomponents.module.tsเพราะสร้างโมดูลที่แยกต่างหากสำหรับส่วนประกอบที่เรียกว่า

มีการนำเข้าส่วนประกอบโมดูลที่จำเป็น

ตามที่ข้อผิดพลาดระบุว่าให้ลบโมดูล AddEvent ออกจากรูทหากเพจ / คอมโพเนนต์ของคุณมีไฟล์โมดูลไอออนิกอยู่แล้วหากไม่เพียง แต่ลบออกจากส่วนอื่น / หน้าเด็ก / คอมโพเนนต์ที่หน้า / ส่วนประกอบควรมีอยู่ในไฟล์โมดูลเดียวเท่านั้น นำเข้าหากจะใช้

โดยเฉพาะอย่างยิ่งคุณควรเพิ่มในโมดูลรูทหากจำเป็นในหลายเพจและหากในเพจใดเพจหนึ่งเก็บไว้ในเพจเดียว

ฉันสร้างส่วนประกอบของตัวเองโดยไม่ได้ตั้งใจด้วยชื่อเดียวกับส่วนประกอบของห้องสมุด

เมื่อฉันใช้ IDE เพื่อนำเข้าไลบรารีสำหรับคอมโพเนนต์โดยอัตโนมัติฉันเลือกไลบรารีไม่ถูกต้อง

ดังนั้นข้อผิดพลาดนี้จึงถูกร้องเรียนว่าฉันกำลังประกาศส่วนประกอบอีกครั้ง

ฉันแก้ไขโดยการนำเข้าจากรหัสของส่วนประกอบของฉันเองแทนที่จะเป็นไลบรารี

ฉันสามารถแก้ไขได้ด้วยการตั้งชื่อให้แตกต่างกัน: หลีกเลี่ยงความคลุมเครือ

ในสถานการณ์สมมตินี้ให้สร้างโมดูลที่ใช้ร่วมกันอื่นในการนำเข้าส่วนประกอบทั้งหมดที่ใช้ในหลายโมดูล

ในส่วนประกอบที่ใช้ร่วมกัน ประกาศส่วนประกอบเหล่านั้น จากนั้นนำเข้าโมดูลที่ใช้ร่วมกันใน appmodule รวมทั้งในโมดูลอื่น ๆ ที่คุณต้องการเข้าถึง มันจะทำงานได้ 100% ฉันทำสิ่งนี้และทำให้มันใช้งานได้

@NgModule({
    declarations: [HeaderComponent, NavigatorComponent],
    imports: [
        CommonModule, BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        FormsModule,
    ] 
})
export class SharedmoduleModule { }
const routes: Routes = [
{
    path: 'Parent-child-relationship',
    children: [
         { path: '', component: HeaderComponent },
         { path: '', component: ParrentChildComponent }
    ]
}];
@NgModule({
    declarations: [ParrentChildComponent, HeaderComponent],
    imports: [ RouterModule.forRoot(routes), CommonModule, SharedmoduleModule ],
    exports: [RouterModule]
})
export class TutorialModule {
}
imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    MatInputModule,
    MatButtonModule,
    MatSelectModule,
    MatIconModule,
    SharedmoduleModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

ฉันมีข้อผิดพลาดเดียวกัน แต่ฉันพบว่าเมื่อคุณนำเข้าAddEventModuleคุณไม่สามารถนำเข้าAddEventโมดูลได้เนื่องจากจะแสดงข้อผิดพลาดในกรณีนี้