घटक 2 मॉड्यूल की घोषणा का हिस्सा है

Question

मैं एक ईओण 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 {}

और मेरा ऐड-इवेंट.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 से घोषणा को हटा देता हूं तो मुझे एक त्रुटि मिलती है कि आयनिक सेवा चलाने के दौरान लॉगिन पृष्ठ नहीं मिला है

Answer 1

घोषणा को हटा दें 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

Comments

हे आपके उत्तर के लिए धन्यवाद, क्या मुझे '' से भी AddEventModule '' ../pages/add-event/add-event.module '; क्योंकि दोनों के साथ, आयात के बिना और एक त्रुटि को फेंक दिया जाता है

— स्टेविट्रो

AppModule में, आपको AddEventModule के लिए एक अतिरिक्त आयात शामिल करना होगा। मैं उत्तर को अद्यतन

— करूंगा

अगर मैं सब कुछ त्रुटि जोड़ देता हूँ "त्रुटि प्रतीक मानों को हल करने में त्रुटि का सामना करना पड़ता है। Add-event.module को हल करने वाले प्रतीक AddModule के सापेक्ष हल नहीं कर सका" फेंक दिया गया है

— स्टीवर्टो

-add-event.module.ts ’फ़ाइल किस फ़ोल्डर में है?

— स्नोर्कपेट

AddEvents जैसे समान फ़ोल्डर में, इसलिए मैंने '' ../pages/add-event/add-event.module '' का उपयोग किया; पेज आयनिक जी पेज

— स्टीवेत्रो

Answer 2

उपयोग करने वाले कुछ लोग 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 { }

Comments

इसे सीधे app.module में क्यों नहीं जोड़ा जा रहा है? या शायद एक core.module के लिए यदि आप इसे app.module से आयात करने जा रहे हैं

— Dani

यह पूर्ण है! मेरे पास इसके अलावा एक है ... आपको ShareModule के आयात में IonicPageModule.forChild (SharedModule) जोड़ना होगा। मुझे तब तक सभी तरह के अजीब मुद्दे मिल रहे थे जब तक मैंने ऐसा नहीं किया।

— Adway Lele

Answer 3

समाधान बहुत सरल है। *.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कमांड में काम करते हैं!

खुश रहो...

Answer 4

IN Angular 4. इस एरर को एनजी सर्विस रन टाइम कैश इशू माना जाता है।

स्थिति: 1 यह त्रुटि तब होगी, जब आप घटक को एक मॉड्यूल में आयात करते हैं और फिर से उप मॉड्यूल में आयात होता है।

मामला: 2 गलत स्थान पर एक घटक आयात करें और सही मॉड्यूल में हटा दिया और बदल दिया, उस समय इसे कैश सेवा के एनजी के रूप में माना जाता है। परियोजना को रोकने और फिर से सेवा शुरू करने की आवश्यकता है, यह उम्मीद के मुताबिक काम करेगा।

Comments

केस 1 मेरे मामले में मुद्दा था, सॉल्वेड!

— प्रेम पोपटिया

Answer 5

यदि आपके पृष्ठ CLI का उपयोग करके बनाया गया है तो यह फ़ाइल नाम के साथ फाइल बनाता है। नाम तो आपको अपनी फ़ाइल का नाम रजिस्टर करना होगा । 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,
],

Answer 6

जब आप आयनिक कमांड चलाते हैं तो यह मॉड्यूल अपने आप जुड़ जाता है। हालाँकि यह आवश्यक नहीं है। तो एक वैकल्पिक समाधान परियोजना से add-event.module.ts को निकालना है ।

Answer 7

आप बस इस समाधान की कोशिश कर सकते हैं (Ionic 3 के लिए)

मेरे मामले में, यह त्रुटि तब होती है जब मैं निम्नलिखित कोड का उपयोग करके किसी पृष्ठ को कॉल करता हूं

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

मैंने केवल निम्नलिखित जैसे उद्धरण हटा दिए हैं और उस पृष्ठ को फ़ाइल के शीर्ष पर भी आयात किया है, जिसका उपयोग मैंने लॉगिन पृष्ठ पर किया था

this.navCtrl.push (लॉग इन); // सही बात

मैं इस समय के अंतर को स्पष्ट नहीं कर सकता क्योंकि मैं शुरुआती स्तर का डेवलपर हूं

Comments

आपने मेरे दोस्त को आलसी लोड करने से रोक दिया है क्योंकि यह महत्वपूर्ण है

— जॉर्ज

Answer 8

Ionic-CLI का उपयोग कर उत्पन्न हर पृष्ठ Ionic 3.6.0 रिलीज के बाद से अब एक कोणीय मॉड्यूल है। इसका मतलब है कि आप फ़ाइल में मॉड्यूल को अपने आयात में जोड़ सकते हैं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 {}

Answer 9

इस त्रुटि को पार करने के लिए, आपको 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: string = 'HomePage';

फिर नेविगेशन फ़ंक्शन इस तरह होना चाहिए:

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

आप इस समाधान का स्रोत यहां पा सकते हैं: घटक 2 मॉड्यूल की घोषणा का हिस्सा है

Answer 10

इसे हल किया - घटक 2 मॉड्यूल की घोषणा का हिस्सा है

1. ऐप में pagename.module.ts फ़ाइल निकालें
2. 'आयनिक-कोणीय' से आयात {IonicApp} निकालें; pagename.ts फ़ाइल में
3. Pagename.ts फ़ाइल से @IonicPage () निकालें

और कमांड आयनिक कॉर्डोबा चलाएं android --prod --release को अपने ऐप में काम करना

Answer 11

एक ही समस्या थी। बस "घोषणाओं" में मॉड्यूल की हर घटना को दूर करना सुनिश्चित करें लेकिन AppModule।

मेरे लिए काम किया।

Answer 12

सरल तय,

अपनी app.module.tsफ़ाइल और remove/commentउस सब कुछ पर जाएं जो साथ बांधता है add_event। App.module.tएस को घटकों को जोड़ने की कोई आवश्यकता नहीं है जो कि उत्पन्न होते हैं ionic cliक्योंकि यह घटकों के लिए एक अलग मॉड्यूल बनाता है components.module.ts।

इसमें आवश्यक मॉड्यूल घटक आयात है

Answer 13

जैसा कि त्रुटि यह कहती है कि मॉड्यूल AddEvent को रूट से हटाने के लिए यदि आपके पेज / कंपोनेंट में पहले से ही आयनिक मॉड्यूल फ़ाइल है, तो न केवल इसे दूसरे / चाइल्ड पेज / कंपोनेंट से हटाएं, अंतिम पृष्ठ / घटक में केवल एक मॉड्यूल फ़ाइल में मौजूद होना चाहिए अगर इस्तेमाल किया जा करने के लिए आयातित।

विशेष रूप से, आपको रूट मॉड्यूल को कई पृष्ठों में और यदि विशिष्ट पृष्ठों में आवश्यक हो तो केवल एक पृष्ठ में रखना चाहिए।

Answer 14

मैंने गलती से लाइब्रेरी के घटक के समान नाम के साथ अपना स्वयं का घटक बनाया ।

जब मैंने घटक के लिए पुस्तकालय को ऑटो-आयात करने के लिए अपनी आईडीई का उपयोग किया, तो मैंने गलत पुस्तकालय चुना।

इसलिए यह त्रुटि शिकायत थी, कि मैं घटक को फिर से घोषित कर रहा था ।

मैंने लाइब्रेरी के बजाय अपने स्वयं के घटक कोड से आयात करके तय किया।

मैं अलग-अलग नाम देकर भी ठीक कर सकता था: अस्पष्टता से बचें।

Answer 15

इस परिदृश्य में, उस सभी घटक को आयात करने में एक और साझा मॉड्यूल बनाएँ जो कई मॉड्यूल में उपयोग किया जा रहा है।

साझा घटक में। उन घटक की घोषणा करें। और फिर ऐपमॉड्यूल के साथ-साथ अन्य मॉड्यूल में साझा किए गए मॉड्यूल को आयात करें जहां आप एक्सेस करना चाहते हैं। यह 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 { }

Comments

इस कोड को कोणीय में परीक्षण किया गया है और पूरी तरह से काम कर रहा है

— सारद विश्वकर्मा

Answer 16

मेरे पास एक ही त्रुटि थी लेकिन मुझे पता चला कि जब आप एक आयात करते हैं AddEventModule, तो आप एक AddEventमॉड्यूल आयात नहीं कर सकते क्योंकि यह इस मामले में एक त्रुटि पेश करेगा।