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

Je construis une application angulaire 4. Je reçois une 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 faire référence à l'AppModule? Je suis un peu confus. Dois-je recommander HomeModule ou HomeComponent? En fin de compte, ce que je recherche, c'est lorsque l'utilisateur clique sur le menu Accueil, il doit être dirigé vers le home.component.html qui sera rendu sur la page d'index.

App.module 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 c'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() {
  }

}

Si vous n'utilisez pas le chargement différé, vous devez importer votre HomeComponent dans app.module et le mentionner sous 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 { }

Dans mon cas, je n'ai besoin que de redémarrer le serveur (c'est-à-dire si vous utilisez ng serve).

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

Dans mon cas, il me manquait mon nouveau composant généré dans le declarationsat app.module.ts:

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

J'ai eu le même problème. La raison était 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 ng servir à nouveau.

Si vous utilisez des instructions de chargement différé et d' importation de formulaire de fonction, la cause habituelle est l'importation du module de routage au lieu du module de page . Alors:

Incorrect :

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

Correct :

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

Vous pourriez vous en sortir pendant un certain temps, mais cela finira par causer des problèmes.

Dans mon cas, les importations de routes réelles app.component.spec.tsprovoquaient ces messages d'erreur. La solution était d'importer à la RouterTestingModuleplace.

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

});

J'ai rencontré ce message d'erreur à deux reprises, avec un chargement paresseux dans Angular 7 et ce qui précède n'a pas aidé. Pour que les deux fonctions ci-dessous fonctionnent, vous DEVEZ arrêter et redémarrer le service pour qu'il se mette à jour complètement correctement.

1) La première fois que j'avais importé de manière incorrecte mon AppModule dans le module de fonctionnalités chargé paresseusement. J'ai supprimé cette importation du module chargé paresseusement et il a recommencé à fonctionner.

2) La deuxième fois, j'avais un CoreModule séparé que j'importais dans l'AppModule ET le même module chargé paresseusement que le n ° 1. J'ai supprimé cette importation du module chargé paresseusement et il a recommencé à fonctionner.

En gros, vérifiez votre hiérarchie d'importations et portez une attention particulière à l'ordre des importations (si elles sont importées là où elles devraient être). Les modules chargés différés n'ont besoin que de leurs propres composants / dépendances de route. Les dépendances de l'application et du parent seront transmises, qu'elles soient importées dans AppModule ou importées d'un autre module de fonctionnalités qui n'est PAS chargé paresseusement et déjà importé dans un module parent.

Chargement paresseux angulaire

Dans mon cas, j'ai oublié et réimporté un composant qui fait déjà partie du module enfant importé dans routing.ts.

....
...
 {
path: "clients",
component: ClientsComponent,
loadChildren: () =>
  import(`./components/users/users.module`).then(m => m.UsersModule)
}
.....
..

J'ai rencontré ce même problème et rien de ce que je voyais ici ne fonctionnait. Si vous répertoriez votre composant dans le problème app-routing.module, vous avez peut-être rencontré le même problème que moi.

app.module.ts

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

home / index.ts

export * from './';

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components';

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

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

home / home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// import { HomeComponent } from './home.component'; This would cause app to break
import { HomeComponent } from './';
@NgModule({
  imports: [
    CommonModule
  ],
  exports: [HomeComponent],
  declarations: [HomeComponent]
})
export class HomeModule { }

Je ne prétendrai pas comprendre exactement pourquoi c'est le cas, mais lorsque vous utilisez l'indexation pour exporter des composants (et je suppose la même chose pour les services, etc.), lorsque vous référencez le même composant dans des modules séparés, vous devez les importer à partir du même fichier, dans ce cas l'index, afin d'éviter ce problème.

Dans mon cas, Angular 6, j'ai renommé les noms de dossier et de fichier de mes modules de google.map.module.ts en google-map.module.ts. Afin de compiler sans superposition avec les anciens noms de modules et de composants, ng compilateur a été compilé sans erreur.

Dans app.routes.ts:

     {
        path: 'calendar', 
        loadChildren: './views/app-calendar/app-calendar.module#AppCalendarModule', 
        data: { title: 'Calendar', breadcrumb: 'CALENDAR'}
      },

Dans google-map.routing.ts

import { GoogleMapComponent } from './google-map.component';
const routes: Routes = [
  {
    path: '', component: GoogleMapComponent, data: { title: 'Coupon Map' }
  }
];
@NgModule({
    exports: [RouterModule],
    imports: [RouterModule.forChild(routes)]
})
export class GoogleMapRoutingModule { }

Dans google-map.module.ts:

import { GoogleMapRoutingModule } from './google-map.routing';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CommonModule,
    GoogleMapRoutingModule,
  ],
  exports: [GoogleMapComponent],
  declarations: [GoogleMapComponent]
})
export class GoogleMapModule { }

J'ai rencontré le même problème. J'avais créé un autre composant avec le même nom sous un dossier différent. donc dans mon module d'application, j'ai dû importer les deux composants mais avec une astuce

import {DuplicateComponent as AdminDuplicateComponent} from '/the/path/to/the/component';

Ensuite, dans les déclarations, je pourrais ajouter AdminDuplicateComponent à la place.

Je pensais juste que je laisserais cela là pour référence future.

Vérifiez votre module Lazy, j'ai importé AppRoutingModule dans le module paresseux. Après avoir supprimé l'importation et les importations d'AppRoutingModule, Mine a commencé à fonctionner.

import { AppRoutingModule } from '../app-routing.module'; 

Dans mon cas, je déplaçais le composant UserComponentd'un module appModuleà un autre dashboardModuleet j'ai oublié de supprimer la définition de la route du routage du module précédent appModuledans le fichier AppRoutingModule.

const routes = [
 { path: 'user', component: UserComponent, canActivate: [AuthGuard]},...]

Après avoir supprimé la définition de l'itinéraire, cela a bien fonctionné.

si vous utilisez le chargement paresseux, vous devez charger ce module dans n'importe quel module de routeur, comme dans app-routing.module.ts {chemin: 'home', loadChildren: './ home.module # HomeModule'}

Mon cas est le même que celui de @ 7guyo mentionné. J'utilise le lazyloading et je le fais inconsciemment:

import { component1Route } from './path/component1.route';

export const entityState: Routes = [
{
   path: 'home',
   children: component1Route
}]

Au lieu de:

@NgModule({
imports: [
   RouterModule.forChild([
   {
     path: '',
     loadChildren: () => import('./component1/component1.module').then(m => m.ComponentOneModule)
  },
  {
    path: '',
    loadChildren: () => import('./component2/component2.module').then(m => m.ComponentTwoModule)
  }])
  ]})

  export class MainModule {}

Vous pouvez résoudre ce problème en deux étapes simples:

Ajoutez votre componnet (HomeComponent) au declarationstableau entryComponentsarray.

Comme ce composant n'accède ni au sélecteur de jet ni au routeur, l'ajouter au tableau entryComponnets est important

voir comment faire:

@NgModule({
  declarations: [
    AppComponent,
    ....
    HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ...

  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [HomeComponent]
})
export class AppModule {} 

Lorsque vous utilisez la charge différée, vous devez supprimer le module de votre composant et le module de routage du module d'application. Si vous ne le faites pas, il essaiera de les charger au démarrage de l'application et générera cette erreur.

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule,
      AppRoutingModule,
      // YourComponentModule,
      // YourComponentRoutingModule
   ],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

Dans mon cas, j'ai mal importé, à la place du module au lieu d'importer le module de routage importé (DemoModule) (DemoRoutingModule)

Mauvaise importation:

const routes: Routes = [
  {
  path: '', component: ContentComponent,
  children: [
  { path: '', redirectTo: 'demo' },
  { path: 'demo', loadChildren : () => import('../content/demo/demo-routing.module').then(m => m.DemoRoutingModule)}]
  }
];

Bon code

const routes: Routes = [
  {
  path: '', component: ContentComponent,
  children: [
  { path: '', redirectTo: 'demo' },
  { path: 'demo', loadChildren : () => import('../content/demo/demo.module').then(m => m.DemoModule)}]
  }
];

Vérifiez que votre composant est correctement importé dans app-routing.module.ts. Dans mon cas, c'était la raison

Prérequis: 1. Si vous avez plusieurs modules 2. Et vous utilisez un composant (supposons DemoComponent) d'un module différent (supposons AModule), dans un module différent (supposons BModule)

Alors votre AModule doit être

@NgModule({
  declarations: [DemoComponent],
  imports: [
    CommonModule
  ],
  exports: [AModule]
})
export class AModule{ }

et votre BModule doit être

@NgModule({
  declarations: [],
  imports: [
    CommonModule, AModule
  ],
  exports: [],
})
export class BModule { }

Dans certains cas, la même chose peut se produire lorsque vous avez créé un module pour HomeComponent et dans app-routing.module vous avez directement donné les deux

composant: HomeComponent, loadChildren: "./ modules /.../ HomeModule.module # HomeModule" dans le tableau Routes.

lorsque nous essayons le chargement paresseux, nous ne donnons que l'attribut loadChildren.

J'ai eu cette erreur parce que j'avais le même nom de composant dans 2 modules différents. Une solution est si son utilisation partagée la technique d'exportation, etc., mais dans mon cas, les deux devaient être nommés de la même manière, mais le but était différent.

Le vrai problème

Ainsi, lors de l'importation du composant B, l'intellisense a importé le chemin du composant A donc j'ai dû choisir la 2ème option du chemin du composant d'intellisense et cela a résolu mon problème.