組件不是任何NgModule的一部分，或者模塊尚未導入到您的模塊中

我正在構建一個角度4應用程序。我收到錯誤Component HomeComponent不是任何NgModule的一部分，或者模塊沒有被導入到你的模塊中。我已經創建了HomeModule和HomeComponent。我需要在AppModule中引用哪一個。我有點困惑。我需要引用HomeModule還是HomeComponent？最終，我在尋找的是當用戶點擊主頁菜單時，他應該被定向到home.component.html，它將在索引頁面上呈現。組件不是任何NgModule的一部分，或者模塊尚未導入到您的模塊中

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

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

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

}

來源

2017-06-29 Tom

你使用延遲加載嗎？ –

是的。我如何用延遲加載 – Tom

將'HomeComponent'添加到'entryComponents' –

如果你不使用延遲加載，你需要導入HomeComponent在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'; 
// 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 { }

來源

2017-06-29 14:40:20 Gowtham

我仍然收到錯誤Component HomeComponent不是任何NgModule的一部分，或者模塊沒有被導入到你的模塊中。 – Tom

檢查您的導入路徑是否有組件。也許這將很容易找出您是否可以在這裏更新您的當前代碼 – Gowtham

如果您使用Lazy Loading，那麼該怎麼辦？ – DoubleA

請確認您app.routing.module.ts的順序刪除，可錯字或通訊丟失。之後，硬刷新Chrome瀏覽器（Ctrl + f5）。

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

來源

2018-03-03 23:24:21 user8156618

組件不是任何NgModule的一部分，或者模塊尚未導入到您的模塊中

回答

相關問題