Komponen bukan bagian dari NgModule atau modul belum diimpor ke modul Anda

Saya sedang membangun aplikasi 4 sudut. Saya mendapatkan kesalahan

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

Saya telah membuat HomeModule dan HomeComponent. Yang mana yang saya perlukan untuk merujuk ke AppModule? Saya sedikit bingung. Apakah saya perlu merujuk HomeModule atau HomeComponent? Pada akhirnya apa yang saya cari adalah ketika pengguna mengklik menu Home, dia harus diarahkan ke home.component.html yang akan ditampilkan di halaman indeks.

App.module adalah:

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 adalah:

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 adalah:

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

}

Jika Anda tidak menggunakan pemuatan lambat, Anda perlu mengimpor HomeComponent Anda di app.module dan menyebutkannya di bawah deklarasi. Juga, jangan lupa untuk menghapus dari impor

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

Dalam kasus saya, saya hanya perlu me-restart server (itu jika Anda menggunakan ng serve).

Itu terjadi pada saya setiap kali saya menambahkan modul baru saat server sedang berjalan.

Dalam kasus saya, saya kehilangan komponen yang baru dibuat di declarationsdi app.module.ts:

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

Saya memiliki masalah yang sama. Alasannya karena saya membuat komponen saat server saya masih berjalan. Solusinya adalah keluar dari server dan ng layani lagi.

Penyebab umum JIKA Anda menggunakan pemuatan lambat dan pernyataan impor formulir fungsi adalah mengimpor modul perutean alih-alih modul halaman . Begitu:

Salah :

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

Benar :

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

Anda mungkin lolos dari hal ini untuk sementara waktu, tetapi pada akhirnya akan menimbulkan masalah.

Dalam kasus saya, impor rute nyata di app.component.spec.tsmenyebabkan pesan kesalahan ini. Solusinya adalah mengimpor 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();
  }));

});

Saya menemukan pesan kesalahan ini pada 2 kesempatan terpisah, dengan pemuatan lambat di Angular 7 dan di atas tidak membantu. Agar kedua cara di bawah ini bekerja, Anda HARUS berhenti dan memulai ulang servis agar sepenuhnya diperbarui dengan benar.

1) Pertama kali saya entah bagaimana salah mengimpor AppModule saya ke modul fitur yang dimuat lambat. Saya menghapus impor ini dari modul yang dimuat lambat dan mulai berfungsi kembali.

2) Kedua kalinya saya memiliki CoreModule terpisah yang saya impor ke AppModule DAN modul pemuatan lambat yang sama dengan # 1. Saya menghapus impor ini dari modul yang dimuat lambat dan mulai berfungsi kembali.

Pada dasarnya, periksa hierarki impor Anda dan perhatikan urutan impor (jika diimpor di tempat yang seharusnya). Modul yang dimuat lambat hanya membutuhkan komponen / dependensinya sendiri. Dependensi aplikasi dan induk akan diturunkan apakah diimpor ke AppModule, atau diimpor dari modul fitur lain yang TIDAK lazy dimuat dan sudah diimpor dalam modul induk.

Pemuatan lambat sudut

Dalam kasus saya, saya lupa dan mengimpor ulang komponen yang sudah menjadi bagian dari modul anak yang diimpor di routing.ts.

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

Saya mengalami masalah yang sama dan tidak ada yang berhasil saya lihat di sini. Jika Anda mencantumkan Komponen Anda dalam masalah app-routing.module, Anda mungkin mengalami masalah yang sama dengan yang saya alami.

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

Saya tidak akan mengklaim untuk memahami dengan tepat mengapa hal ini terjadi, tetapi ketika menggunakan pengindeksan untuk mengekspor komponen (dan saya akan mengasumsikan hal yang sama untuk layanan, dll.), Saat mereferensikan komponen yang sama dalam modul terpisah Anda perlu mengimpornya dari file yang sama, dalam hal ini indeks, untuk menghindari masalah ini.

Dalam kasus saya, Angular 6, saya mengganti nama folder dan nama file modul saya dari google.map.module.ts menjadi google-map.module.ts. Untuk mengkompilasi tanpa overlay dengan modul lama dan nama komponen, kompiler ng dikompilasi tanpa kesalahan.

Di app.routes.ts:

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

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

Di google-map.module.ts:

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

Saya mengalami masalah yang sama. Saya telah membuat komponen lain dengan nama yang sama di bawah folder yang berbeda. jadi dalam modul aplikasi saya, saya harus mengimpor kedua komponen tetapi dengan sebuah trik

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

Kemudian dalam deklarasi saya bisa menambahkan AdminDuplicateComponent sebagai gantinya.

Hanya berpikir bahwa saya akan meninggalkannya di sana untuk referensi di masa mendatang.

Periksa modul Lazy Anda, saya telah mengimpor AppRoutingModule di modul malas. Setelah menghapus impor dan impor AppRoutingModule, Milik saya mulai bekerja.

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

Dalam kasus saya, saya memindahkan komponen UserComponentdari satu modul appModuleke modul lainnya dashboardModuledan lupa menghapus definisi rute dari perutean modul sebelumnya appModuledi file AppRoutingModule.

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

Setelah saya menghapus definisi rute, itu berfungsi dengan baik.

jika Anda menggunakan pemuatan lambat, maka harus memuat modul itu di modul router apa pun, seperti di app-routing.module.ts {path: 'home', loadChildren: './ home.module # HomeModule'}

Kasus saya sama dengan yang disebutkan @ 7guyo. Saya menggunakan lazyloading dan secara tidak sadar melakukan ini:

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

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

Dari pada:

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

Anda dapat memperbaikinya dengan dua langkah sederhana:

Tambahkan komponnet Anda (HomeComponent) ke declarationsarray entryComponentsarray.

Karena komponen ini mengakses baik throw selector maupun router, menambahkan ini ke array entryComponnets penting

lihat bagaimana melakukannya:

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

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

Saat Anda menggunakan lazy load, Anda perlu menghapus modul komponen dan modul perutean dari modul aplikasi. Jika tidak, itu akan mencoba memuatnya ketika aplikasi dimulai dan menampilkan kesalahan itu.

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

Dalam kasus saya, saya salah mengimpor, Di tempat modul alih-alih mengimpor modul (DemoModule) modul perutean impor (DemoRoutingModule)

Impor yang Salah:

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

Kode yang Benar

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

Pastikan komponen Anda diimpor dengan benar di app-routing.module.ts. Dalam kasus saya itulah alasannya

Prasyarat: 1. Jika Anda memiliki beberapa Modul 2. Dan Anda menggunakan komponen (misalkan DemoComponent) dari modul yang berbeda (misalkan AModule), dalam modul yang berbeda (misalkan BModule)

Maka AModule Anda seharusnya

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

dan BModule Anda seharusnya

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

Dalam beberapa kasus, hal yang sama dapat terjadi ketika Anda telah membuat modul untuk HomeComponent dan di app-routing.module Anda langsung memberikan keduanya

komponen: HomeComponent, loadChildren: "./ modules /.../ HomeModule.module # HomeModule" dalam larik Routes.

ketika kami mencoba pemuatan lambat, kami hanya memberikan atribut loadChildren.

Saya mendapat kesalahan ini karena saya memiliki nama komponen yang sama di 2 modul yang berbeda. Salah satu solusinya adalah jika berbagi menggunakan teknik ekspor dll tetapi dalam kasus saya keduanya harus diberi nama yang sama tetapi tujuannya berbeda.

Masalah Sebenarnya

Jadi saat mengimpor komponen B, intellisense mengimpor jalur Komponen A jadi saya harus memilih opsi ke-2 dari jalur komponen dari Intellisense dan itu menyelesaikan masalah saya.