web-dev-qa-db-fra.com

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

Je construis une application angulaire 4. Je reçois une erreur Component HomeComponent ne fait pas partie d'un module NgModule ou le module n'a pas été importé dans votre module .. J'ai créé HomeModule et HomeComponent. Lequel dois-je faire référence dans le module d'application? Je suis un peu confus. Dois-je consulter HomeModule ou HomeComponent? En fin de compte, ce que je recherche, c’est que lorsque l’utilisateur clique sur le menu Accueil, il doit être dirigé vers le fichier home.component.html qui sera affiché sur la page d’index.

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

AccueilModule

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

AccueilComposant

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

}
angular
33
Tom

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

Dans mon cas, je n'ai qu'à 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.

21
jsnewbie

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

7
wyz1

Dans mon cas, les importations de routes réelles dans app.component.spec.ts étaient à l'origine de ces messages d'erreur. La solution consistait à importer RouterTestingModule à la place.

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

});
1
robie2011

J'ai rencontré le 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 je rencontrais.

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

accueil/index.ts

export * from './';

app-routage.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étends pas comprendre exactement pourquoi, mais lorsque vous utilisez l'indexation pour exporter des composants (et je suppose que c'est la même chose pour les services, etc.), lorsque vous référencez le même composant dans des modules distincts, vous devez les importer à partir du même fichier, en l’occurrence l’index, afin d’éviter ce problème.

1
Nics1225

Dans mon cas, Angular 6, j’ai renommé les noms de dossiers et de fichiers de mes modules de google.map.module.ts en google-map.module.ts. Afin de compiler sans superposer d'anciens noms de modules et de composants, le compilateur ng a compilé sans erreur .  enter image description here

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 { }
1
Young Kim

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 éléments ci-dessous fonctionnent, vous DEVEZ arrêter et redémarrer votre serveur pour qu'il se mette à jour correctement.

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

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

En gros, vérifiez votre hiérarchie d’importations et prêtez une attention particulière à l’ordre des importations (si elles sont importées où elles devraient être). Les modules chargés paresseux n'ont besoin que de leurs propres composants/dépendances de route. Les dépendances app et parent sont transmises, qu'elles soient importées dans AppModule ou importées à partir d'un autre module de fonctionnalité chargé non paresseux et déjà importé dans un module parent.

0
Avolition