Komponent nie jest częścią jakiegokolwiek modułu NgModule lub moduł nie został zaimportowany do modułu

Question

Buduję aplikację kątową 4. Pojawia się błąd Komponent HomeComponent nie jest częścią jakiegokolwiek modułu NgModule lub moduł nie został zaimportowany do modułu. Stworzyłem HomeModule i HomeComponent. Którego potrzebuję odnieść w AppModule. Jestem trochę zdezorientowany. Czy muszę odwołać HomeModule lub HomeComponent. Ostatecznie szukam, gdy użytkownik kliknie menu główne, powinien zostać przekierowany do pliku home.component.html, który zostanie wyrenderowany na stronie indeksu.

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

} 

Answer 1

jeśli nie używasz leniwy załadunku, trzeba importować HomeComponent w app.module i wzmianki pod deklaracjami. Ponadto, nie zapomnij, aby usunąć z importu

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

Answer 2

Proszę sprawdzić kolejność app.routing.module.ts może być typo lub Comm brakuje. a potem Hard odświeża przeglądarkę (Ctrl + F5) dla chrome.

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