घटक किसी भी NgModule का हिस्सा नहीं है या मॉड्यूल को आपके मॉड्यूल

Question

में आयात नहीं किया गया है, मैं एक कोणीय 4 एप्लिकेशन बना रहा हूं। मुझे त्रुटि मिल रही है घटक कॉम्पोनेंट किसी भी NgModule का हिस्सा नहीं है या मॉड्यूल आपके मॉड्यूल में आयात नहीं किया गया है। मैंने होम मॉड्यूल और होमकंपोनेंट बनाया है। ऐप मॉड्यूल में मुझे किसको संदर्भित करने की आवश्यकता है। मैं थोड़ा उलझन में हूँ। क्या मुझे होम मॉड्यूल या होमकंपोनेंट को संदर्भित करने की आवश्यकता है। आखिरकार जो मैं ढूंढ रहा हूं वह यह है कि जब उपयोगकर्ता होम मेनू पर क्लिक करता है, तो उसे home.component.html पर निर्देशित किया जाना चाहिए जो इंडेक्स पेज पर प्रस्तुत किया जाएगा।

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

अपने आलसी लोड हो रहा है उपयोग नहीं कर रहे हैं, तो आप app.module और उल्लेख में अपने HomeComponent आयात करने की आवश्यकता यह घोषणाओं के तहत। इसके अलावा, आयात

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

अपने app.routing.module.ts के आदेश की पुष्टि करें से दूर करने के लिए, टाइपो जा सकता है या कॉम लापता मत भूलना। और उसके बाद क्रोम क्रोम के लिए ब्राउजर (Ctrl + f5) रीफ्रेश करें।

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