Die Komponente ist nicht Teil eines NgModules oder das Modul wurde nicht in Ihr Modul importiert

Ich baue eine Winkel 4-Anwendung. Ich bekomme einen Fehler

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

Ich habe HomeModule und HomeComponent erstellt. Welches muss ich für das AppModule verwenden? Ich bin etwas verwirrt. Muss ich auf HomeModule oder HomeComponent verweisen? Letztendlich suche ich, wenn der Benutzer auf das Home-Menü klickt, sollte er zu der home.component.html geleitet werden, die auf der Indexseite gerendert wird.

App.module ist:

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

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

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

}

Wenn Sie kein verzögertes Laden verwenden, müssen Sie Ihre HomeComponent in app.module importieren und unter Deklarationen angeben. Vergessen Sie auch nicht, aus den Importen zu entfernen

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

In meinem Fall muss ich den Server nur neu starten (wenn Sie ihn verwenden ng serve).

Es passiert mir jedes Mal, wenn ich ein neues Modul hinzufüge, während der Server läuft.

In meinem Fall fehlte mir meine neu generierte Komponente im declarationsat app.module.ts:

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

Ich hatte das gleiche Problem. Der Grund war, dass ich eine Komponente erstellt habe, während mein Server noch lief. Die Lösung besteht darin, den Server zu beenden und erneut zu bedienen.

Die übliche Ursache, wenn Sie verzögerte Lade- und Funktionsformular-Importanweisungen verwenden, ist das Importieren des Routingmoduls anstelle des Seitenmoduls . So:

Falsch :

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

Richtig :

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

Sie werden vielleicht eine Weile damit durchkommen, aber irgendwann wird es Probleme verursachen.

Ich bin zweimal auf diese Fehlermeldung gestoßen, wobei das verzögerte Laden in Angular 7 und das oben Genannte nicht geholfen haben. Damit beide der folgenden Funktionen funktionieren, MÜSSEN Sie anhalten und neu starten, damit sie vollständig korrekt aktualisiert werden.

1) Zum ersten Mal hatte ich mein AppModule irgendwie falsch in das faul geladene Funktionsmodul importiert. Ich habe diesen Import aus dem faul geladenen Modul entfernt und er hat wieder funktioniert.

2) Zum zweiten Mal hatte ich ein separates CoreModule, das ich in das AppModule importierte, UND dasselbe faul geladene Modul wie # 1. Ich habe diesen Import aus dem faul geladenen Modul entfernt und er hat wieder funktioniert.

Überprüfen Sie grundsätzlich Ihre Hierarchie der Importe und achten Sie genau auf die Reihenfolge der Importe (wenn sie dort importiert werden, wo sie sein sollten). Faul geladene Module benötigen nur ihre eigenen Routenkomponenten / Abhängigkeiten. App- und übergeordnete Abhängigkeiten werden weitergegeben, unabhängig davon, ob sie in AppModule importiert oder aus einem anderen Feature-Modul importiert wurden, das NICHT verzögert geladen und bereits in ein übergeordnetes Modul importiert wurde.

In meinem Fall verursachten die Importe von realen Routen in app.component.spec.tsdiese Fehlermeldungen. Die Lösung bestand darin, RouterTestingModulestattdessen zu importieren .

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

});

Winkel faul laden

In meinem Fall habe ich eine Komponente vergessen und erneut importiert, die bereits Teil des importierten untergeordneten Moduls in routing.ts ist.

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

Ich bin auf dasselbe Problem gestoßen und nichts von dem, was ich hier sah, funktionierte. Wenn Sie Ihre Komponente im Problem app-routing.module auflisten, ist möglicherweise dasselbe Problem aufgetreten, das ich hatte.

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

Ich werde nicht behaupten, genau zu verstehen, warum dies der Fall ist, aber wenn Sie die Indizierung zum Exportieren von Komponenten verwenden (und ich würde dasselbe für Dienste usw. annehmen), wenn Sie dieselbe Komponente in separaten Modulen referenzieren, müssen Sie sie aus dem importieren gleiche Datei, in diesem Fall der Index, um dieses Problem zu vermeiden.

In meinem Fall Angular 6 habe ich die Ordner- und Dateinamen meiner Module von google.map.module.ts in google-map.module.ts umbenannt. Um ohne Überlagerung mit alten Modul- und Komponentennamen zu kompilieren, wurde der ng-Compiler fehlerfrei kompiliert.

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

Ich bin auf das gleiche Problem gestoßen. Ich hatte eine andere Komponente mit demselben Namen in einem anderen Ordner erstellt. Also musste ich in meinem App-Modul beide Komponenten importieren, aber mit einem Trick

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

Dann könnte ich in Deklarationen stattdessen AdminDuplicateComponent hinzufügen.

Ich dachte nur, dass ich das dort für zukünftige Referenz belassen würde.

Überprüfen Sie Ihr Lazy-Modul. Ich habe AppRoutingModule in das Lazy-Modul importiert. Nachdem der Import und die Importe von AppRoutingModule entfernt wurden, begann Mine zu arbeiten.

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

In meinem Fall habe ich die Komponente UserComponentvon einem Modul appModulein ein anderes verschoben dashboardModuleund vergessen, die appModuleRoutendefinition aus dem Routing des vorherigen Moduls in der AppRoutingModule-Datei zu entfernen .

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

Nachdem ich die Routendefinition entfernt hatte, funktionierte es einwandfrei.

Wenn Sie Lazy Loading verwenden, müssen Sie dieses Modul in ein beliebiges Routermodul laden, z. B. in app-routing.module.ts {Pfad: 'home', loadChildren: './ home.module # HomeModule'}

Mein Fall ist der gleiche wie bei @ 7guyo erwähnt. Ich benutze Lazyloading und habe dies unbewusst getan:

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

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

Anstatt:

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

Sie können dies in zwei einfachen Schritten beheben:

Fügen Sie Ihre Komponente (HomeComponent) zum declarationsArray- entryComponentsArray hinzu.

Da diese Komponente weder auf den Wurfselektor noch auf den Router zugreift, ist es wichtig, dies dem Array entryComponnets hinzuzufügen

sehen, wie es geht:

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

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

Wenn Sie Lazy Load verwenden, müssen Sie das Modul und das Routing-Modul Ihrer Komponente aus dem App-Modul löschen. Wenn Sie dies nicht tun, wird versucht, sie beim Start der App zu laden und diesen Fehler auszulösen.

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

In meinem Fall habe ich falsch importiert, an Modulstelle anstatt Modul (DemoModule) importiertes Routingmodul (DemoRoutingModule) importiert

Falscher Import:

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

Richtiger Code

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

Stellen Sie sicher, dass Ihre Komponente ordnungsgemäß in app-routing.module.ts importiert wurde. In meinem Fall war das der Grund

Voraussetzungen: 1. Wenn Sie mehrere Module haben 2. Und Sie eine Komponente (angenommen DemoComponent) aus einem anderen Modul (angenommen AModule) in einem anderen Modul (angenommen BModule) verwenden

Dann sollte Ihr AModule sein

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

und dein BModule sollte sein

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

In einigen Fällen kann dasselbe passieren, wenn Sie ein Modul für HomeComponent erstellt haben und in app-routing.module beide direkt angegeben haben

Komponente: HomeComponent, loadChildren: "./ modules /.../ HomeModule.module # HomeModule" im Routes-Array.

Wenn wir versuchen, faul zu laden, geben wir nur das Attribut loadChildren an.

Ich habe diesen Fehler erhalten, weil ich in 2 verschiedenen Modulen den gleichen Komponentennamen hatte. Eine Lösung ist, wenn es gemeinsam die Exporttechnik usw. verwendet, aber in meinem Fall mussten beide gleich benannt werden, aber der Zweck war unterschiedlich.

Das eigentliche Problem

Während des Imports von Komponente B importierte Intellisense den Pfad von Komponente A, sodass ich die zweite Option des Komponentenpfads von Intellisense auswählen musste. Dadurch wurde mein Problem behoben.