组件不是任何NgModule的一部分，或者该模块尚未导入到您的模块中

问题描述

我正在构建一个角度为4的应用程序.我遇到错误了

I am building an angular 4 application. I am getting error

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

我已经创建了HomeModule和HomeComponent.我需要引用哪一个AppModule?我有点困惑.我是否需要引用HomeModule或HomeComponent?最终，我要寻找的是用户单击主页"菜单时，应将他定向到将在索引页面上呈现的home.component.html.

I have created HomeModule and HomeComponent. Which one do I need to refer to the AppModule? I am a bit confused. Do I need to refer HomeModule or HomeComponent? Ultimately what I am looking for is when the user clicks the Home menu, he should be directed to the home.component.html which will be rendered on the index page.

App.module是:

App.module is:

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

HomeModule is:

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

HomeComponent is:

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

}

推荐答案

如果您不使用延迟加载，则需要将HomeComponent导入app.module并在声明下进行提及.另外，别忘了从导入中删除

If your are not using lazy loading, you need to import your HomeComponent in app.module and mention it under declarations. Also, don't forget to remove from imports

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

这篇关于组件不是任何NgModule的一部分，或者该模块尚未导入到您的模块中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！