Le composant ne fait pas partie d'un NgModule ou le module n'a pas été importé dans votre module.

Question

Je suis en train de construire une application angular 4. J'obtiens l'erreur

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

J'ai créé HomeModule et HomeComponent. Lequel dois-je utiliser pour faire référence à l'AppModule ? Je suis un peu perdu. Dois-je faire référence à HomeModule ou à HomeComponent ? En fin de compte, lorsque l'utilisateur clique sur le menu Home, il doit être dirigé vers home.component.html qui sera affiché sur la page d'index.

Le module App.est :

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

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

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

Si vous n'utilisez pas le lazy loading, vous devez importer votre HomeComponent dans app.module et le mentionner dans les déclarations. N'oubliez pas non plus de supprimer des importations

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

Dans mon cas, il me suffit de redémarrer le serveur (c'est-à-dire si vous utilisez la fonction ng serve ).

Cela m'arrive à chaque fois que j'ajoute un nouveau module alors que le serveur est en cours d'exécution.

Answer 3

Dans mon cas, il manquait mon nouveau composant généré dans le fichier declarations à app.module.ts :

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

Answer 4

J'ai eu le même problème. La raison est que j'ai créé un composant alors que mon serveur était toujours en cours d'exécution. La solution est de quitter le serveur et de le relancer.

Answer 5

Dans mon cas, les importations d'itinéraires réels dans app.component.spec.ts étaient à l'origine de ces messages d'erreur. La solution a consisté à importer RouterTestingModule au lieu de cela.

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

});