组件不是任何NgModule的一部分,或者模块尚未导入模块

Question

我正在构建一个角度4应用程序.我收到错误组件HomeComponent没有任何NgModule的部分或模块尚未导入到你的模块.我创建了HomeModule和HomeComponent.我需要在AppModule中引用哪一个.我有点困惑.我是否需要参考HomeModule或HomeComponent.最终我要找的是当用户点击主菜单时,他应该被定向到将在索引页面上呈现的home.component.html.

App.module

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

HomeModule

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

HomeComponent

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

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

在我的情况下,我只需要重新启动服务器(即如果你正在使用ng serve).

每次我在服务器运行时添加新模块时都会发生这种情况.

Answer 3

就我而言，我在declarationsat 缺少了新生成的组件app.module.ts：

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

Answer 4

我有同样的问题.原因是因为我在服务器仍在运行时创建了一个组件.解决方案是退出服务器并再次使用ng服务.

Answer 5

如果您使用延迟加载和函数表单导入语句，通常的原因是导入路由模块而不是页面模块。所以：

不正确：

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

正确：

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

您可能会暂时摆脱这种情况，但最终会导致问题。

Answer 6

我在 2 个不同的场合遇到了这个错误消息，在 Angular 7 中延迟加载，以上没有帮助。要使以下两个工作正常运行，您必须停止并重新启动 ng 服务以使其完全正确更新。

1）我第一次以某种方式错误地将我的 AppModule 导入到延迟加载的功能模块中。我从延迟加载的模块中删除了这个导入，它又开始工作了。

2）第二次我有一个单独的 CoreModule，我将它导入到 AppModule 和与 #1 相同的延迟加载模块。我从延迟加载的模块中删除了这个导入，它又开始工作了。

基本上，检查导入的层次结构并密切注意导入的顺序（如果它们被导入到它们应该在的位置）。延迟加载的模块只需要自己的路由组件/依赖项。应用程序和父依赖项无论是导入到 AppModule 中，还是从另一个非延迟加载并已导入到父模块中的功能模块导入，都将被传递下去。

Answer 7

在我的情况下，实际路由的导入app.component.spec.ts导致了这些错误消息。解决方案是导入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();
  }));

});