घटक किसी भी NgModule का हिस्सा नहीं है या मॉड्यूल आपके मॉड्यूल में आयात नहीं किया गया है


101

मैं एक कोणीय 4 अनुप्रयोग बना रहा हूं। मुझे त्रुटि हो रही है

Error:Component HomeComponent is not part of any NgModule or the module has not been imported into your module.

मैंने HomeModule और HomeComponent बनाया है। मुझे AppModule को किससे संदर्भित करने की आवश्यकता है? मैं थोड़ा असमंजस में हूँ। क्या मुझे HomeModule या HomeComponent को संदर्भित करने की आवश्यकता है? अंततः मैं जो खोज रहा हूं वह तब है जब उपयोगकर्ता होम मेनू पर क्लिक करता है, उसे home.component.html पर निर्देशित किया जाना चाहिए जो कि इंडेक्स पेज पर प्रस्तुत किया जाएगा।

App.module है:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http'

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import { AppRoutingModule } from './app.routing';
import { HomeModule } from './Home/home.module';

@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent

  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    HomeModule

  ],
  providers: [MRDBGlobalConstants],
  bootstrap: [AppComponent]
})
export class AppModule { }

होममॉड्यूल है:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [HomeComponent],
  declarations: [HomeComponent]
})
export class HomeModule { }

HomeComponent है:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

1
क्या आप आलसी लोडिंग का उपयोग करते हैं?
मैक्स कोरसेटस्की

1
हाँ। मैं इसे आलसी लोडिंग के साथ कैसे करता हूं
टॉम

4
जोड़ने के HomeComponentलिएentryComponents
मैक्स कोर्सेटस्की

प्रविष्टि से आप क्या मतलब रखते हैंकंपर्स
टॉम

4
यहां पढ़ें और यहां बताया गया है कि आप इसे कैसे करते हैं:@NgModule({ imports: [ CommonModule ], exports: [HomeComponent], declarations: [HomeComponent], entryComponents: [HomeComponent] })
मैक्स कोरसेटस्की

जवाबों:


93

यदि आप आलसी लोडिंग का उपयोग नहीं कर रहे हैं, तो आपको app.module में अपने HomeComponent को आयात करना होगा और घोषणाओं के तहत इसका उल्लेख करना होगा। इसके अलावा, आयात से हटाने के लिए मत भूलना

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http'

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import {AppRoutingModule} from './app.routing';
import {HomeModule} from './Home/home.module';
// import HomeComponent here

@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent,
    // add HomeComponent here
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    HomeModule  // remove this

  ],
  providers: [MRDBGlobalConstants],
  bootstrap: [AppComponent]
})
export class AppModule { }

1
मुझे अभी भी त्रुटि मिलती है घटक HomeComponent किसी भी NgModule का हिस्सा नहीं है या मॉड्यूल आपके मॉड्यूल में आयात नहीं किया गया है।
टॉम

जाँच करें कि क्या आपका रास्ता जहाँ आप आयात कर रहे हैं, वहाँ घटक है। शायद यह पता लगाना आसान होगा कि क्या आप यहां अपना वर्तमान कोड अपडेट कर सकते हैं
गौतम

30
यदि आप आलसी लोडिंग का उपयोग कर रहे हैं तो क्या होगा?
डबलू

angular-2-training-book.rangle.io/handout/modules/… - यदि कोई व्यक्ति आलसी लोडिंग का उपयोग करना चाहता है तो यह लिंक सहायक हो सकता है
Mateusz Migała

हाँ, यह HomeModule होने के उद्देश्य को नहीं हराता है?
निक गैलीमोर

56

मेरे मामले में, मुझे केवल सर्वर को पुनरारंभ करने की आवश्यकता है (यदि आप उपयोग कर रहे हैं तो ng serve)।

यह हर बार होता है जब मैं सर्वर चला रहा होता हूं तो एक नया मॉड्यूल जोड़ता हूं।


बैंग न्यू टू एंगुलर एंड दिस बिट मी। सर्वर को पुनरारंभ किया और यह बहुत अच्छा काम किया।
स्क्विलमैन

22

मेरे मामले में, मुझे अपने नए जेनरेट किए गए घटक की कमी declarationsथी app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    ....
    NewGeneratedComponent, //this was missing
    ....
  ],
  imports: [
    ....

आलसी लोडिंग सुविधाओं के साथ खिलवाड़ किया गया और यह टिप्पणी करते हुए समाप्त हुआ। धन्यवाद!
सागर खत्री

यह मेरे लिए जवाब था! इसके अलावा, अगर यह एक रूटिंग कंपोनेंट है, तो ऐप-रूटिंग-माड्यूल.टी में घोषणाएँ सेट करें
रॉबर्ट स्मिथ

10

मुझे भी यही समस्या थी। इसका कारण यह था कि मैंने एक घटक बनाया था जबकि मेरा सर्वर अभी भी चल रहा था। समाधान सर्वर को छोड़ना और फिर से सेवा करना है।


6

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

गलत :

loadChildren: () => import('./../home-routing.module').then(m => m.HomePageRoutingModule)

सही करें :

loadChildren: () => import('./../home.module').then(m => m.HomePageModule)

आप कुछ समय के लिए इससे दूर हो सकते हैं, लेकिन अंततः यह समस्या पैदा करेगा।


5

मेरे मामले में वास्तविक मार्गों का आयात app.component.spec.tsइन त्रुटि संदेशों का कारण बन रहा था। समाधान के RouterTestingModuleबजाय आयात करना था।

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [RouterTestingModule]
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    console.log(fixture);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

});

5

मैं 2 अलग-अलग अवसरों पर इस त्रुटि संदेश में भाग गया, साथ में कोणीय 7 में आलसी लोड हो रहा था और इसके बाद के संस्करण ने मदद नहीं की। काम करने के लिए नीचे दोनों के लिए आपको रुक जाना चाहिए और इसे पूरी तरह से सही ढंग से अपडेट करने के लिए एनजी सर्व करें।

1) पहली बार मैंने किसी तरह से गलत तरीके से लोड किए गए फ़ीचर मॉड्यूल में अपने AppModule को गलत तरीके से आयात किया था। मैंने इस आयात को आलसी लोडेड मॉड्यूल से हटा दिया और इसने फिर से काम करना शुरू कर दिया।

2) दूसरी बार मेरे पास एक अलग CoreModule था जिसे मैं AppModule और # 1 के रूप में एक ही आलसी लोड किए गए मॉड्यूल में आयात कर रहा था। मैंने इस आयात को आलसी लोडेड मॉड्यूल से हटा दिया और इसने फिर से काम करना शुरू कर दिया।

मूल रूप से, आयात के अपने पदानुक्रम की जांच करें और आयात के आदेश पर पूरा ध्यान दें (यदि वे आयात किए गए हैं जहां उन्हें होना चाहिए)। आलसी लोड किए गए मॉड्यूल को केवल अपने स्वयं के मार्ग घटक / निर्भरता की आवश्यकता होती है। ऐप और माता-पिता की निर्भरता नीचे पारित कर दी जाएगी कि क्या वे AppModule में आयात किए गए हैं, या किसी अन्य सुविधा मॉड्यूल से आयात किए गए हैं जो कि आलसी लोड नहीं है और पहले से ही एक मूल मॉड्यूल में आयात किए गए हैं।


3

कोणीय आलसी लोडिंग

मेरे मामले में मैं एक घटक को भूल गया और फिर से आयात किया जो पहले से ही रूटिंग में आयातित चाइल्ड मॉड्यूल का हिस्सा है।

....
...
 {
path: "clients",
component: ClientsComponent,
loadChildren: () =>
  import(`./components/users/users.module`).then(m => m.UsersModule)
}
.....
..

2

मैं इसी मुद्दे पर भागा और जो कुछ भी मैं यहां देख रहा था वह काम कर रहा था। यदि आप अपने कंपोनेंट को ऐप-रूटिंग.मॉडल इश्यू में सूचीबद्ध कर रहे हैं तो आप उसी समस्या में भाग सकते हैं जो मुझे हो रही थी।

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import {AppRoutingModule} from './app.routing';
import {HomeModule} from './Home/home.module';
// import HomeComponent here

@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent,
    // add HomeComponent here
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    HomeModule  // remove this

  ],
  providers: [MRDBGlobalConstants],
  bootstrap: [AppComponent]
})
export class AppModule { }

घर / index.ts

export * from './';

एप्लिकेशन-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components';

const routes: Routes = [
    { path: 'app/home', component: HomeComponent },
    { path: '', redirectTo: 'app/home', pathMatch: 'full' },
    { path: '**', redirectTo: 'app/home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

घर / home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// import { HomeComponent } from './home.component'; This would cause app to break
import { HomeComponent } from './';
@NgModule({
  imports: [
    CommonModule
  ],
  exports: [HomeComponent],
  declarations: [HomeComponent]
})
export class HomeModule { }

मैं वास्तव में यह समझने का दावा नहीं करूंगा कि यह मामला क्यों है, लेकिन निर्यात घटकों को अनुक्रमण का उपयोग करते समय (और मैं सेवाओं, आदि के लिए समान होगा), जब अलग-अलग मॉड्यूल में एक ही घटक को संदर्भित करते हुए आपको उनसे आयात करने की आवश्यकता होती है। एक ही फाइल, इस मामले में इस मुद्दे से बचने के लिए सूचकांक।


1

मेरे मामले में, कोणीय 6, मैंने अपने मॉड्यूल के नाम और फ़ाइल को google.map.module.ts से google-map.module.ts पर नाम दिया है। पुराने मॉड्यूल और घटक नामों के साथ ओवरले के बिना संकलित करने के लिए, एनजी संकलक बिना किसी त्रुटि के साथ संकलित। यहां छवि विवरण दर्ज करें

App.routes.ts में:

     {
        path: 'calendar', 
        loadChildren: './views/app-calendar/app-calendar.module#AppCalendarModule', 
        data: { title: 'Calendar', breadcrumb: 'CALENDAR'}
      },

Google-map.rout.ts में

import { GoogleMapComponent } from './google-map.component';
const routes: Routes = [
  {
    path: '', component: GoogleMapComponent, data: { title: 'Coupon Map' }
  }
];
@NgModule({
    exports: [RouterModule],
    imports: [RouterModule.forChild(routes)]
})
export class GoogleMapRoutingModule { }

Google-map.module.ts में:

import { GoogleMapRoutingModule } from './google-map.routing';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CommonModule,
    GoogleMapRoutingModule,
  ],
  exports: [GoogleMapComponent],
  declarations: [GoogleMapComponent]
})
export class GoogleMapModule { }

इसने दुर्भाग्य से इस मुद्दे को हल किया, लेकिन मुझे वास्तव में यह नहीं मिला कि <Custom>RouterModuleघटक को निर्यात क्यों करना है।
योरको गोंजालेस

1

मैं उसी मुद्दे में भाग गया। मैंने एक अलग फ़ोल्डर के तहत एक ही नाम के साथ एक और घटक बनाया था। इसलिए मेरे ऐप मॉड्यूल में मुझे दोनों घटकों को आयात करना था लेकिन एक चाल के साथ

import {DuplicateComponent as AdminDuplicateComponent} from '/the/path/to/the/component';

तब घोषणाओं में मैं इसके बजाय AdminDuplicateComponent जोड़ सकता था।

बस सोचा था कि मैं भविष्य के संदर्भ के लिए उसे छोड़ दूंगा।


1

अपने आलसी मॉड्यूल की जाँच करें, मैं आलसी मॉड्यूल में आयातित AppRoutModule का समर्थन करता हूं। AppRoutModule के आयात और आयात को हटाने के बाद, माइन ने काम करना शुरू कर दिया।

import { AppRoutingModule } from '../app-routing.module'; 

1

मेरे मामले में, मैं घटक UserComponentको एक मॉड्यूल appModuleसे दूसरे में ले जा रहा था dashboardModuleऔर appModuleAppRoutModule फ़ाइल में पिछले मॉड्यूल के मार्ग से रूट की परिभाषा को निकालना भूल गया था ।

const routes = [
 { path: 'user', component: UserComponent, canActivate: [AuthGuard]},...]

मैं रूट परिभाषा को हटाने के बाद यह ठीक काम किया।


0

यदि आप आलसी लोडिंग का उपयोग कर रहे हैं, तो किसी भी राउटर मॉड्यूल में उस मॉड्यूल को लोड करना होगा, जैसे ऐप-रूटिंग.module.ts {path: 'home', loadChildren: './ home.module # HomeModule'}।


0

मेरा मामला @ 7guyo के समान है। मैं आलसीपन का उपयोग कर रहा हूं और बेहोश कर रहा था:

import { component1Route } from './path/component1.route';

export const entityState: Routes = [
{
   path: 'home',
   children: component1Route
}]

के बजाय:

@NgModule({
imports: [
   RouterModule.forChild([
   {
     path: '',
     loadChildren: () => import('./component1/component1.module').then(m => m.ComponentOneModule)
  },
  {
    path: '',
    loadChildren: () => import('./component2/component2.module').then(m => m.ComponentTwoModule)
  }])
  ]})

  export class MainModule {}

0

आप इसे सरल दो चरणों द्वारा ठीक कर सकते हैं:

declarationsसरणी के लिए अपने डाटासेट (HomeComponent) जोड़ें entryComponents

जैसा कि यह घटक एक्सेस है, न तो चयनकर्ता और न ही राउटर को फेंक दें, इसे प्रविष्टिकंपनी में जोड़ना महत्वपूर्ण है

देखें कैसे करें:

@NgModule({
  declarations: [
    AppComponent,
    ....
    HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ...

  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [HomeComponent]
})
export class AppModule {} 

0

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

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule,
      AppRoutingModule,
      // YourComponentModule,
      // YourComponentRoutingModule
   ],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

0

मेरे मामले में, मैं गलत आयात करता हूं, इंपोर्ट मॉड्यूल (DemoModule) इंपोर्टेड रूटिंग मॉड्यूल के बजाय इंपोर्ट (इंट्रोमरोडिंग)

गलत आयात:

const routes: Routes = [
  {
  path: '', component: ContentComponent,
  children: [
  { path: '', redirectTo: 'demo' },
  { path: 'demo', loadChildren : () => import('../content/demo/demo-routing.module').then(m => m.DemoRoutingModule)}]
  }
];

सही कोड

const routes: Routes = [
  {
  path: '', component: ContentComponent,
  children: [
  { path: '', redirectTo: 'demo' },
  { path: 'demo', loadChildren : () => import('../content/demo/demo.module').then(m => m.DemoModule)}]
  }
];

0

सत्यापित करें कि आपका घटक एप्लिकेशन- routing.module.ts में ठीक से आयात किया गया है। मेरे मामले में यही कारण था


0

आवश्यकताएँ: 1. यदि आपके पास एक से अधिक मॉड्यूल हैं। 2. और आप एक अलग मॉड्यूल से एक घटक (मान लीजिए DemoComponent) का उपयोग कर रहे हैं (मान लीजिए AModule), एक अलग मॉड्यूल में (मान लीजिए BModule)

तब आपका एएमड्यूल होना चाहिए

@NgModule({
  declarations: [DemoComponent],
  imports: [
    CommonModule
  ],
  exports: [AModule]
})
export class AModule{ }

और आपका बीएमड्यूल होना चाहिए

@NgModule({
  declarations: [],
  imports: [
    CommonModule, AModule
  ],
  exports: [],
})
export class BModule { }

0

कुछ मामलों में ऐसा ही हो सकता है जब आपने HomeComponent के लिए एक मॉड्यूल बनाया हो और ऐप-रूटिंग में आप दोनों को सीधे दिए गए हों।

घटक: HomeComponent, loadChildren: "./ मॉड्यूल /... / होममॉड्यूल। होम # होममूल" रूट सरणी में।

जब हम आलसी लोडिंग का प्रयास करते हैं तो हम केवल लोडशिल्डन विशेषता देते हैं।


0

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

असली मुद्दा

इसलिए घटक B को आयात करते समय, intellisense ने Component A का पथ आयात किया, इसलिए मुझे intellisense से घटक पथ का दूसरा विकल्प चुनना पड़ा और इससे मेरा मुद्दा हल हो गया।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.