উপাদান কোনও এনজিএমডুলের অংশ নয় বা মডিউলটি আপনার মডিউলটিতে আমদানি করা হয়নি

Question

আমি একটি কৌনিক 4 অ্যাপ্লিকেশন তৈরি করছি। আমার ত্রুটি হচ্ছে

Error:Component HomeComponent is not part of any NgModule or the module has not been imported into your 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 { }

হোম কম্পোনেন্টটি হ'ল:

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() {
  }

}

Comments

আপনি কি অলস লোডিং ব্যবহার করেন?

— ম্যাক্স কোরেস্তস্কি

হ্যাঁ. অলস লোডিংয়ের সাথে আমি এটি কীভাবে করব

— টম

যোগ HomeComponentকরুনentryComponents

— ম্যাক্স কোরেস্তস্কি

এন্ট্রি কম্পোনেন্টস দ্বারা আপনার অর্থ কী

— টম

পড়া এখানে : এবং এখানে কিভাবে আপনি এটা করবেন হয়@NgModule({ imports: [ CommonModule ], exports: [HomeComponent], declarations: [HomeComponent], entryComponents: [HomeComponent] })

— ম্যাক্স Koretskyi

Answer 1

যদি আপনি অলস লোডিং ব্যবহার না করে থাকেন তবে আপনাকে আপনার হোম কম্পোনেন্টটি অ্যাপ.মডিউলে আমদানি করতে হবে এবং এটি ঘোষণার অধীনে উল্লেখ করতে হবে। এছাড়াও, আমদানি থেকে সরাতে ভুলবেন না

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 { }

Comments

আমি এখনও ত্রুটিটি পেয়েছি কম্পোনেন্ট হোম কম্পোনেন্টটি কোনও এনজিএমডুলের অংশ নয় বা মডিউলটি আপনার মডিউলটিতে আমদানি করা হয়নি।

— টম

আপনি যেখান থেকে আমদানি করছেন সেখানকার উপাদানটি রয়েছে কিনা তা পরীক্ষা করুন। আপনি এখানে আপনার বর্তমান কোডটি আপডেট করতে পারতেন কিনা তা খুঁজে পাওয়া সহজ হবে

— গোথাম

আপনি যদি অলস লোডিং ব্যবহার করছেন তবে কী হবে?

— Double11

angular-2-training-book.rangle.io/handout/modules/… - কেউ যদি অলস লোডিং ব্যবহার করতে চায় তবে এই লিঙ্কটি সহায়ক হতে পারে

— ম্যাটিউজ মিগিয়া

হ্যাঁ, এটি হোমমোডুল থাকার উদ্দেশ্যটিকে পরাজিত করে না?

— নিক গ্যালিমোর

Answer 2

আমার ক্ষেত্রে, আমাকে কেবল সার্ভারটি পুনরায় চালু করতে হবে (এটি আপনি যদি ব্যবহার করছেন তবে ng serve)।

সার্ভার চলাকালীন আমি যখনই একটি নতুন মডিউল যুক্ত করি তখনই আমার সাথে এটি ঘটে।

Comments

ঠাণ্ডা মাথা কৌণিক নতুন এবং এই আমাকে বিট। সার্ভারটি পুনরায় চালু করুন এবং এটি দুর্দান্ত কাজ করেছে।

— স্কুইলম্যান

Answer 3

আমার ক্ষেত্রে, আমি আমার নতুন উত্পন্ন উপাদান অনুপস্থিত ছিল declarationsএ app.module.ts:

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

Comments

অলস লোডিং বৈশিষ্ট্যগুলি নিয়ে চারপাশে জগাখিচুবি হয়েছে এবং এটির মন্তব্য শেষ হয়েছে। ধন্যবাদ!

— সাগর খাত্রি

এই ছিল আমার জন্য উত্তর! এছাড়াও, যদি এটি কোনও রাউটিং উপাদান হয় তবে অ্যাপ্লিকেশন-রাউটিং-মডিউল.টিস-এ ঘোষণাগুলি সেট করুন

— রবার্ট স্মিথ

Answer 4

আমারও একই সমস্যা ছিল। কারণটি ছিল কারণ আমার সার্ভারটি চলমান অবস্থায় আমি একটি উপাদান তৈরি করেছি। সমাধানটি হ'ল সার্ভারটি ছেড়ে দেওয়া এবং এনজি সার্ভিস আবার দেওয়া।

Answer 5

আপনি যদি অলস লোডিং এবং ফাংশন ফর্ম আমদানির বিবরণ ব্যবহার করছেন তবে সাধারণ কারণটি পৃষ্ঠা মডিউলটির পরিবর্তে রাউটিং মডিউলটি আমদানি করছে । সুতরাং:

ভুল :

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

সঠিক :

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

আপনি কিছু সময়ের জন্য এটি থেকে দূরে সরে যেতে পারেন, তবে শেষ পর্যন্ত এটি সমস্যার কারণ হবে।

Answer 6

আমার ক্ষেত্রে সত্যিকারের রুটের আমদানিগুলি 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();
  }));

});

Answer 7

আমি 2 টি পৃথক অনুষ্ঠানে এই ত্রুটি বার্তায় দৌড়েছি, অ্যাংুলার 7 এ অলস লোডিং সহ এবং উপরেরটি কোনও উপকারে আসেনি। নীচের উভয়টি কাজ করার জন্য আপনাকে পুরোপুরি সঠিকভাবে আপডেট হওয়ার জন্য এনজি সার্ভিস বন্ধ করতে হবে এবং পুনরায় চালু করতে হবে।

1) প্রথমবার আমি কোনওভাবেই অলস লোড হওয়া বৈশিষ্ট্য মডিউলটিতে আমার অ্যাপমোডুলটিকে ভুলভাবে আমদানি করেছি। আমি অলস লোডযুক্ত মডিউল থেকে এই আমদানিটি সরিয়েছি এবং এটি আবার কাজ শুরু করে।

2) দ্বিতীয় বার আমার কাছে একটি আলাদা কোরমডুল ছিল যা আমি অ্যাপমোডুল এবং # 1 হিসাবে একই অলস লোডযুক্ত মডিউলটিতে আমদানি করছি। আমি অলস লোডযুক্ত মডিউল থেকে এই আমদানিটি সরিয়েছি এবং এটি আবার কাজ শুরু করে।

মূলত, আপনার আমদানির শ্রেণিবিন্যাস পরীক্ষা করে দেখুন এবং আমদানির ক্রমটির দিকে মনোযোগ দিন (যদি সেগুলি যেখানে হওয়া উচিত সেগুলি আমদানি করা হয়)। অলস লোডযুক্ত মডিউলগুলির কেবল তাদের নিজস্ব রুটের উপাদান / নির্ভরতা প্রয়োজন। অ্যাপ্লিকেশন এবং পিতামাতার নির্ভরতাগুলি অ্যাপমডুলিতে আমদানি করা হয়েছে কিনা, বা অন্য কোনও বৈশিষ্ট্য মডিউল থেকে আমদানি করা হবে না যা অলস নয় এবং ইতিমধ্যে পিতামাতার মডিউলটিতে আমদানি করা হবে।

Answer 8

আমি এই একই ইস্যুতে দৌড়েছি এবং আমি এখানে যা দেখছিলাম তার কোনওটিই কাজ করছে না। আপনি যদি অ্যাপ-রাউটিংয়ে আপনার উপাদানটি তালিকাভুক্ত করেন mod মডুল্য ইস্যুতে আপনিও আমার একই সমস্যার মুখোমুখি হতে পারেন।

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 { }

হোম / সূচক

export * from './';

অ্যাপ্লিকেশন- রাউটিং

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 / 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 { }

আমি কেন এটি ক্ষেত্রে ঠিক তা বুঝতে পেরেছি দাবি করব না, তবে উপাদানগুলি রফতানি করতে ইনডেক্সিং ব্যবহার করার সময় (এবং আমি পরিষেবাগুলি ইত্যাদির জন্যও একই ধারণা করব), যখন পৃথক মডিউলগুলিতে আপনাকে একই উপাদানটি আমদানি করা দরকার তখন এই সমস্যাটি এড়ানোর জন্য একই ফাইল, এই ক্ষেত্রে সূচক।

Answer 9

কৌণিক অলস লোডিং

আমার ক্ষেত্রে আমি ভুলে গিয়েছিলাম এবং এমন একটি উপাদান পুনরায় আমদানি করেছি যা ইতিমধ্যে রাউটিং.টিসে আমদানি করা শিশু মডিউলের অংশ।

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

Answer 10

আমার ক্ষেত্রে, কৌণিক 6, আমি ফোল্ডারটির নামকরণ করেছি এবং আমার মডিউলগুলির নাম google.map.module.ts থেকে গুগল-ম্যাপ.মডিউল.টসে রেখেছি। পুরানো মডিউল এবং উপাদানগুলির নামগুলির সাথে ওভারলে ছাড়াই সংকলন করার জন্য, এনজি সংকলক কোনও ত্রুটি ছাড়াই সংকলিত।

App.routes.ts এ:

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

গুগল- map.routing.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 { }

গুগল- map.module.ts এ:

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

Comments

দুর্ভাগ্যক্রমে এটি সমস্যার সমাধান করেছে, তবে কেন <Custom>RouterModuleউপাদানটি রফতানি করতে হবে তা সত্যিই আমি পাই না ।

— ইওরাকো গঞ্জালেস

Answer 11

আমি একই ইস্যু মধ্যে দৌড়ে। আমি একই নামের সাথে অন্য ফোল্ডারের অধীনে অন্য একটি উপাদান তৈরি করেছি। সুতরাং আমার অ্যাপ্লিকেশন মডিউলে আমাকে দুটি কৌশলই আমদানি করতে হয়েছিল তবে একটি কৌশল দ্বারা

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

তারপরে ঘোষণাগুলিতে আমি এর পরিবর্তে অ্যাডমিনডুপ্লিকেট কম্পোনেন্ট যুক্ত করতে পারি।

কেবল ভেবেছি ভবিষ্যতের রেফারেন্সের জন্য আমি সেখানে রেখে যাব।

Answer 12

আপনার অলস মডিউলটি পরীক্ষা করুন, আমি অলস মডিউলে অ্যাপআর্টিংমডুল আমদানি করেছি। AppRoutingModule এর আমদানি এবং আমদানি অপসারণের পরে, খনি কাজ শুরু করে।

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

Answer 13

আমার ক্ষেত্রে, আমি উপাদানটি UserComponentএকটি মডিউল appModuleথেকে অন্য dashboardModuleমডিলে appModuleনিয়ে যাচ্ছিলাম এবং অ্যাপরআউটিংমডুল ফাইলটিতে পূর্ববর্তী মডিউলটির রাউটিং থেকে রুট সংজ্ঞাটি সরিয়ে দিতে ভুলে গিয়েছি।

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

আমি রুটের সংজ্ঞাটি সরিয়ে দেওয়ার পরে এটি ঠিকঠাক কাজ করেছে।

Answer 14

আপনি যদি অলস লোডিং ব্যবহার করছেন তবে অবশ্যই অ্যাপ্লিকেশন-রাউটিং.মডিউল.সেটসের মতো কোনও রাউটার মডিউলে সেই মডিউলটি লোড করতে হবে {পথ: 'হোম', লোডচিলডেন: '/ / হোম.মডিউল # হোমমোডুল'}

Answer 15

আমার কেস @ 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 {}

Answer 16

আপনি সাধারণ দুটি পদক্ষেপের মাধ্যমে এটি ঠিক করতে পারেন:

declarationsঅ্যারে entryComponentsঅ্যারেতে আপনার কম্পোননেট (হোম কম্পোনেন্ট) যুক্ত করুন ।

যেহেতু এই উপাদানটি অ্যাক্সেস হিসাবে না নির্বাচক বা রাউটারকে ফেলে দেয়, এন্ট্রিকম্পনেট অ্যারেতে এটি যুক্ত করা গুরুত্বপূর্ণ

কীভাবে করবেন দেখুন:

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

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

Answer 17

আপনি যখন অলস লোড ব্যবহার করেন আপনাকে অ্যাপ মডিউল থেকে আপনার উপাদানগুলির মডিউল এবং রাউটিং মডিউলটি মুছতে হবে। আপনি যদি তা না করেন তবে অ্যাপ্লিকেশন শুরু হওয়ার সাথে সাথে এগুলি লোড করার চেষ্টা করবে এবং ত্রুটিটি ছুঁড়ে দেবে।

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

Answer 18

আমার ক্ষেত্রে, আমি ভুল আমদানি করেছি, মডিউল (ডেমোমডিউল) আমদানি করে রাউটিং মডিউলটির পরিবর্তে মডিউল স্থানে (ডেমোআর্টিংমোডিউল)

ভুল আমদানি:

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)}]
  }
];

Answer 19

আপনার উপাদানটি অ্যাপ-রাউটিং.মডিউল.টসগুলিতে সঠিকভাবে আমদানি করা হয়েছে তা যাচাই করুন। আমার ক্ষেত্রে এই কারণ ছিল

Answer 20

পূর্বশর্তসমূহ: ১. যদি আপনার একাধিক মডিউল থাকে ২. এবং আপনি একটি পৃথক মডিউল (ধরুন এ্যামোডুল) থেকে একটি উপাদান (ধরুন ডেমোকম্পোনটি) একটি ভিন্ন মডিউলে ব্যবহার করছেন (ধরুন বিএমডিউল)

তারপরে আপনার অ্যামডুল হওয়া উচিত

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

এবং আপনার BModule হওয়া উচিত

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

Answer 21

আপনি যখন হোম কম্পোনেন্ট এবং অ্যাপ-রাউটিংয়ে একটি মডিউল তৈরি করেছেন তখন কোনও ক্ষেত্রে একই ঘটনা ঘটতে পারে mod

উপাদান: হোম কম্পোনেন্ট, লোডচিল্ডেন: "./ মডিউল /.../ হোমমোডিউল.মডিউল # হোমমোডুল" রুট অ্যারেতে।

যখন আমরা অলস লোডিংয়ের চেষ্টা করি আমরা কেবল লোডচিল্ডেন অ্যাট্রিবিউটই দেই না।

Answer 22

আমি এই ত্রুটিটি পেয়েছি কারণ 2 টি পৃথক মডিউলে আমার উপাদানটির একই নাম ছিল। এর সমাধান হ'ল যদি এর ভাগাভাগি রফতানির কৌশল ইত্যাদি ব্যবহার করা হয় তবে আমার ক্ষেত্রে উভয়কেই নামকরণ করতে হয়েছিল তবে উদ্দেশ্যটি ভিন্ন ছিল।

আসল ইস্যু

সুতরাং উপাদান বিটি আমদানির সময়, ইন্টেলিসেন্সটি কম্পোনেন্ট এটির পথটি আমদানি করেছিল তাই আমাকে ইন্টেলিজেন্স থেকে উপাদানটির দ্বিতীয় বিকল্পটি বেছে নিতে হয়েছিল এবং এটি আমার সমস্যার সমাধান করেছিল।