Bileşen herhangi bir NgModule'ün parçası değil veya modül modülünüze aktarılmamış

Açısal 4 uygulama oluşturuyorum. Hata alıyorum

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

HomeModule ve HomeComponent'ı oluşturdum. AppModule'a başvurmak için hangisine ihtiyacım var? Biraz kafam karıştı HomeModule veya HomeComponent'e başvurmam gerekir mi? Nihayetinde aradığım şey, kullanıcı Ana menüyü tıkladığında, dizin sayfasında görüntülenecek olan home.component.html'ye yönlendirilmelidir.

Uygulama modülü:

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

HomeModule:

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

Ana Bileşen:

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

}

Tembel yüklemeyi kullanmıyorsanız, HomeComponent'inizi app.module'da içe aktarmanız ve bildirimler altında belirtmeniz gerekir. Ayrıca, ithalattan çıkarmayı unutmayın

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

Benim durumumda, yalnızca sunucuyu yeniden başlatmam gerekiyor (yani kullanıyorsanız ng serve).

Sunucu çalışırken her yeni modül eklediğimde bana oluyor.

Benim durumumda, ben benim yeni oluşturulan bileşen eksikti declarationsat app.module.ts:

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

Ben de aynı sorunu yaşadım. Nedeni, sunucum hala çalışırken bir bileşen oluşturmamdı. Çözüm, sunucuyu ve ng hizmetini tekrar bırakmaktır.

Tembel yükleme ve işlev formu içe aktarma deyimlerini kullanıyorsanız genel neden , sayfa modülü yerine yönlendirme modülünü içe aktarmaktır . Yani:

Yanlış :

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

Doğru :

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

Bundan bir süre kurtulabilirsiniz, ancak sonunda sorunlara neden olacaktır.

Bu hata mesajını 2 ayrı durumda, Angular 7'de tembel yükleme ile karşılaştım ve yukarıdakiler yardımcı olmadı. Aşağıdakilerin her ikisinin de çalışması için, tamamen doğru bir şekilde güncellenmesi için hizmeti durdurup yeniden başlatmanız GEREKİR.

1) İlk kez AppModule'ümü yavaş yüklü özellik modülüne yanlış bir şekilde içe aktarmıştım. Bu içe aktarmayı tembel yüklü modülden kaldırdım ve tekrar çalışmaya başladı.

2) İkinci kez, AppModule'a aktardığım ayrı bir CoreModule'üm vardı VE # 1 ile aynı tembel yüklü modül. Bu içe aktarmayı tembel yüklü modülden kaldırdım ve tekrar çalışmaya başladı.

Temel olarak, ithalat hiyerarşinizi kontrol edin ve ithalat sırasına çok dikkat edin (olması gereken yere ithal ediliyorlarsa). Geç yüklenen modüller yalnızca kendi yol bileşenlerine / bağımlılıklarına ihtiyaç duyar. Uygulama ve ebeveyn bağımlılıkları, ister AppModule'a aktarılsın, ister tembel yüklü OLMAYAN ve bir üst modüle zaten içe aktarılmış başka bir özellik modülünden içe aktarılsın aktarılacaktır.

Benim durumumda, gerçek rotaların içe app.component.spec.tsaktarılması bu hata mesajlarına neden oluyordu. Çözüm, RouterTestingModulebunun yerine içe aktarmaktı .

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

});

Aynı sorunla karşılaştım ve burada gördüklerimin hiçbiri işe yaramadı. Bileşeninizi app-routing.module sorununda listeliyorsanız, benim yaşadığım sorunun aynısıyla karşılaşmış olabilirsiniz.

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

home / index.ts

export * from './';

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

Durumun tam olarak neden böyle olduğunu anladığımı iddia etmeyeceğim, ancak bileşenleri dışa aktarmak için indekslemeyi kullanırken (ve servisler için aynısını varsayıyorum), aynı bileşene ayrı modüllerde referans verirken bunları bilgisayardan içe aktarmanız gerekir. bu sorunu önlemek için aynı dosya, bu durumda dizin.

Açısal tembel yükleme

Benim durumumda, routing.ts'de içe aktarılan alt modülün parçası olan bir bileşeni unuttum ve yeniden içe aktardım.

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

Benim durumumda Angular 6, modüllerimin klasör ve dosya adlarını google.map.module.ts'den google-map.module.ts olarak yeniden adlandırdım . Eski modül ve bileşen isimleri ile örtüşmeden derlemek için, ng derleyicisi hatasız derlendi.

App.routes.ts içinde:

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

Google-map.routing.ts içinde

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 içinde:

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

Ben de aynı sorunla karşılaştım. Farklı bir klasör altında aynı ada sahip başka bir bileşen oluşturmuştum. bu yüzden uygulama modülümde her iki bileşeni de içe aktarmak zorunda kaldım ancak bir hile ile

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

Sonra bildirimlerde bunun yerine AdminDuplicateComponent ekleyebilirim.

Gelecekte başvurmak için orada bırakacağımı düşündüm.

Lazy modülünüzü kontrol edin, tembel modülde AppRoutingModule'u içe aktardım. AppRoutingModule'un içe ve dışa aktarımlarını kaldırdıktan sonra Mine çalışmaya başladı.

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

Benim durumumda, bileşeni UserComponentbir modülden appModulediğerine taşıyordum dashboardModuleve yol tanımını appModuleAppRoutingModule dosyasındaki önceki modülün yönlendirmesinden kaldırmayı unuttum .

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

Rota tanımını kaldırdıktan sonra iyi çalıştı.

geç yükleme kullanıyorsanız, bu modülü herhangi bir yönlendirici modülüne yüklemelisiniz, örneğin app-routing.module.ts {yol: 'home', loadChildren: './ home.module # HomeModule'}

Benim durumum belirtilen @ 7guyo ile aynı. Tembel yükleme kullanıyorum ve bilinçsizce bunu yapıyordum:

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

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

Onun yerine:

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

Bunu basit iki adımda düzeltebilirsiniz:

Bileşeninizi (HomeComponent) declarationsdizi entryComponentsdizisine ekleyin .

Bu bileşen, atma seçicisine veya yönlendiriciye erişmediğinden, bunu entryComponnets dizisine eklemek önemlidir

nasıl yapılacağını görün:

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

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

Tembel yükleme kullandığınızda, bileşen modülünüzü ve yönlendirme modülünü uygulama modülünden silmeniz gerekir. Yapmazsanız, uygulama başladığında bunları yüklemeye çalışır ve bu hatayı atar.

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

Benim durumumda, modülü (DemoModule) içe aktarmak yerine modül yerine yanlış ithal ettim, içe aktarılan yönlendirme modülü (DemoRoutingModule)

Yanlış İthalat:

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

Doğru Kod

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

Bileşeninizin app-routing.module.ts içine düzgün şekilde içe aktarıldığını doğrulayın. Benim durumumda sebep buydu

Önkoşullar: 1. Birden fazla Modülünüz varsa 2. Ve farklı bir modülden (AModule varsayalım), farklı bir modülde (BModule varsayalım) bir bileşen (DemoComponent varsayalım) kullanıyorsanız

O zaman AModülünüz

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

ve BModülünüz olmalıdır

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

Bazı durumlarda, HomeComponent için bir modül oluşturduğunuzda ve app-routing.module'de doğrudan her ikisini de verdiğinizde aynı şey olabilir.

bileşen: HomeComponent, loadChildren: "./ module /.../ HomeModule.module # HomeModule" Routes dizisinde.

tembel yüklemeyi denediğimizde yalnızca loadChildren niteliği veriyoruz.

Bu hatayı aldım çünkü 2 farklı modülde aynı bileşen adına sahiptim. Çözümlerden biri, ortak kullanımın dışa aktarma tekniğini vb. Kullanmasıdır, ancak benim durumumda her ikisinin de aynı adlandırılması gerekiyordu, ancak amaç farklıydı.

Asıl Sorun

Bu yüzden, bileşen B'yi içe aktarırken, intellisense, Bileşen A'nın yolunu içe aktardı, bu nedenle, intellisense bileşen yolunun 2. seçeneğini seçmem gerekti ve bu sorunumu çözdü.