Il componente non fa parte di alcun NgModule o il modulo non è stato importato nel modulo

Sto costruendo un'applicazione angolare 4. Ricevo un errore

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

Ho creato HomeModule e HomeComponent. Quale devo fare riferimento ad AppModule? Sono un po 'confuso. Devo fare riferimento a HomeModule o HomeComponent? In definitiva, quello che sto cercando è quando l'utente fa clic sul menu Home, dovrebbe essere indirizzato a home.component.html che verrà visualizzato nella pagina dell'indice.

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

HomeModule è:

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

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

}

Se non stai usando il caricamento lento, devi importare il tuo HomeComponent in app.module e menzionarlo nelle dichiarazioni. Inoltre, non dimenticare di rimuovere dalle importazioni

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

Nel mio caso, ho solo bisogno di riavviare il server (cioè se stai usando ng serve).

Mi succede ogni volta che aggiungo un nuovo modulo mentre il server è in esecuzione.

Nel mio caso, mi mancava il mio nuovo componente generato nel declarationspresso app.module.ts:

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

Ho avuto lo stesso problema. Il motivo era perché ho creato un componente mentre il mio server era ancora in esecuzione. La soluzione è chiudere il server e eseguire di nuovo il servizio.

La solita causa SE stai usando il caricamento lento e le istruzioni di importazione del modulo di funzione è importare il modulo di routing invece del modulo della pagina . Così:

Errato :

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

Corretto :

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

Potresti farla franca per un po ', ma alla fine causerà problemi.

Mi sono imbattuto in questo messaggio di errore in 2 occasioni separate, con il caricamento lento in Angular 7 e quanto sopra non ha aiutato. Affinché entrambi i passaggi seguenti funzionino, è NECESSARIO interrompere e riavviare ng perché si aggiorni completamente correttamente.

1) La prima volta che in qualche modo avevo importato in modo errato il mio AppModule nel modulo delle funzionalità a caricamento lento. Ho rimosso questa importazione dal modulo caricato lazy e ha ricominciato a funzionare.

2) La seconda volta ho avuto un CoreModule separato che stavo importando in AppModule E lo stesso modulo caricato pigro come # 1. Ho rimosso questa importazione dal modulo caricato lazy e ha ricominciato a funzionare.

Fondamentalmente, controlla la tua gerarchia delle importazioni e presta molta attenzione all'ordine delle importazioni (se vengono importate dove dovrebbero essere). I moduli caricati in modo pigro necessitano solo dei propri componenti / dipendenze di route. Le dipendenze dell'app e del genitore verranno trasmesse indipendentemente dal fatto che vengano importate in AppModule o importate da un altro modulo di funzionalità che non è caricato in modo pigro e già importato in un modulo principale.

Nel mio caso le importazioni di percorsi reali in app.component.spec.tsstavano causando questi messaggi di errore. La soluzione era RouterTestingModuleinvece importare .

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

});

Caricamento pigro angolare

Nel mio caso ho dimenticato e reimportato un componente che fa già parte del modulo figlio importato in routing.ts.

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

Mi sono imbattuto in questo stesso problema e niente di ciò che vedevo qui funzionava. Se stai elencando il tuo componente nel problema app-routing.module, potresti aver riscontrato lo stesso problema che stavo avendo.

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

Non pretendo di capire esattamente perché questo è il caso, ma quando si utilizza l'indicizzazione per esportare componenti (e presumo lo stesso per i servizi, ecc.), Quando si fa riferimento allo stesso componente in moduli separati è necessario importarli dal stesso file, in questo caso l'indice, per evitare questo problema.

Nel mio caso, Angular 6, ho rinominato cartelle e nomi di file dei miei moduli da google.map.module.ts a google-map.module.ts. Per compilare senza sovrapposizione con i vecchi nomi di moduli e componenti, il compilatore ng è stato compilato senza errori.

In app.routes.ts:

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

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

In google-map.module.ts:

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

Mi sono imbattuto nello stesso problema. Avevo creato un altro componente con lo stesso nome in una cartella diversa. quindi nel modulo della mia app ho dovuto importare entrambi i componenti ma con un trucco

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

Quindi nelle dichiarazioni potrei aggiungere AdminDuplicateComponent invece.

Ho solo pensato di lasciarlo lì per riferimento futuro.

Controlla il tuo modulo pigro, ho importato AppRoutingModule nel modulo pigro. Dopo aver rimosso l'importazione e le importazioni di AppRoutingModule, Mine ha iniziato a funzionare.

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

Nel mio caso, stavo spostando il componente UserComponentda un modulo appModulea un altro dashboardModulee ho dimenticato di rimuovere la definizione del percorso dal routing del modulo precedente appModulenel file AppRoutingModule.

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

Dopo aver rimosso la definizione del percorso, ha funzionato bene.

se stai utilizzando il caricamento lento, devi caricare quel modulo in qualsiasi modulo router, come in app-routing.module.ts {path: 'home', loadChildren: './ home.module # HomeModule'}

Il mio caso è lo stesso menzionato da @ 7guyo. Sto usando il lazyloading e lo stavo facendo inconsciamente:

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

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

Invece di:

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

Puoi risolvere questo problema con due semplici passaggi:

Aggiungi il tuo componnet (HomeComponent) declarationsall'array entryComponentsarray.

Poiché questo componente non accede né al selettore di lancio né al router, è importante aggiungerlo all'array entryComponnets

guarda come fare:

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

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

Quando si utilizza il caricamento lento, è necessario eliminare il modulo del componente e il modulo di instradamento dal modulo dell'app. In caso contrario, proverà a caricarli all'avvio dell'app e restituirà l'errore.

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

Nel mio caso, ho importato male, al posto del modulo invece di importare il modulo (DemoModule) importato il modulo di routing (DemoRoutingModule)

Importazione errata:

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

Codice corretto

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

Verifica che il tuo componente sia importato correttamente in app-routing.module.ts. Nel mio caso questo era il motivo

Prerequisiti: 1. Se hai più moduli 2. E stai utilizzando un componente (supponiamo DemoComponent) da un modulo diverso (supponiamo AModule), in un modulo diverso (supponiamo BModule)

Allora il tuo AModule dovrebbe essere

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

e il tuo BModule dovrebbe essere

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

In alcuni casi lo stesso può accadere quando hai creato un modulo per HomeComponent e in app-routing.module hai fornito direttamente entrambi

componente: HomeComponent, loadChildren: "./ modules /.../ HomeModule.module # HomeModule" nell'array Routes.

quando proviamo il caricamento lento diamo solo l'attributo loadChildren.

Ho ricevuto questo errore perché avevo lo stesso nome del componente in 2 moduli diversi. Una soluzione è che se condivide l'uso della tecnica di esportazione, ecc.Ma nel mio caso entrambi dovevano essere denominati uguali, ma lo scopo era diverso.

Il vero problema

Quindi, durante l'importazione del componente B, l'intellisense ha importato il percorso del componente A, quindi ho dovuto scegliere la seconda opzione del percorso del componente da intellisense e questo ha risolto il mio problema.