Component maakt geen deel uit van een NgModule of de module is niet geïmporteerd in uw module

Ik ben een hoekige 4-applicatie aan het bouwen. Ik krijg een foutmelding

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

Ik heb HomeModule en HomeComponent gemaakt. Welke heb ik nodig om naar de AppModule te verwijzen? Ik ben een beetje in de war. Moet ik HomeModule of HomeComponent verwijzen? Waar ik uiteindelijk naar op zoek ben, is dat wanneer de gebruiker op het Home-menu klikt, hij naar de home.component.html moet worden geleid die op de indexpagina wordt weergegeven.

App.module is:

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

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

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

Antwoord 1, autoriteit 100%

Als je geen gebruik maakt van ‘lazy loading’, moet je je HomeComponent importeren in app.module en dit vermelden onder declaraties. Vergeet ook niet te verwijderen uit import

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

Antwoord 2, autoriteit 57%

In mijn geval hoef ik alleen de server opnieuw op te starten (als je ng servegebruikt).

Het overkomt me elke keer dat ik een nieuwe module toevoeg terwijl de server draait.


Antwoord 3, autoriteit 25%

In mijn geval miste ik mijn nieuw gegenereerde component in de declarationsop app.module.ts:

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

Antwoord 4, autoriteit 10%

Ik had hetzelfde probleem. De reden was dat ik een component heb gemaakt terwijl mijn server nog actief was.
De oplossing is om de server af te sluiten en opnieuw te serveren.


Antwoord 5, autoriteit 6%

Ik kwam deze foutmelding bij 2 verschillende gelegenheden tegen, met lui laden in Angular 7 en het bovenstaande hielp niet. Om beide onderstaande te laten werken, MOET u stoppen en herstarten om het volledig correct te updaten.

1) De eerste keer dat ik mijn AppModule op de een of andere manier verkeerd had geïmporteerd in de lui geladen functiemodule. Ik heb deze import uit de luie geladen module verwijderd en het begon weer te werken.

2) Tweede keer dat ik een aparte CoreModule had die ik in de AppModule importeerde EN dezelfde luie geladen module als #1. Ik heb deze import uit de luie geladen module verwijderd en het begon weer te werken.

Controleer in principe uw hiërarchie van importen en let goed op de volgorde van de importen (als ze zijn geïmporteerd waar ze zouden moeten zijn). Lui geladen modules hebben alleen hun eigen routecomponent / afhankelijkheden nodig. Afhankelijkheden van apps en ouders worden doorgegeven, of ze nu worden geïmporteerd in AppModule of geïmporteerd vanuit een andere functiemodule die NIET lui is geladen en al is geïmporteerd in een bovenliggende module.


Antwoord 6, autoriteit 5%

In mijn geval veroorzaakten de importen van echte routes in app.component.spec.tsdeze foutmeldingen. Oplossing was om in plaats daarvan RouterTestingModulete importeren.

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

Antwoord 7, autoriteit 4%

Hoekig lui laden

In mijn geval ben ik een component vergeten en opnieuw geïmporteerd die al deel uitmaakt van de geïmporteerde onderliggende module in routing.ts.

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

Antwoord 8, autoriteit 3%

Ik kwam hetzelfde probleem tegen en niets van wat ik hier zag werkte. Als u uw Component vermeldt in het app-routing.module-probleem, bent u mogelijk hetzelfde probleem tegengekomen als ik had.

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

Ik zal niet beweren dat ik precies begrijp waarom dit het geval is, maar wanneer u indexering gebruikt om componenten te exporteren (en ik zou hetzelfde aannemen voor services, enz.), wanneer u naar dezelfde component verwijst in afzonderlijke modules die u moet importeren ze uit hetzelfde bestand, in dit geval de index, om dit probleem te voorkomen.


Antwoord 9, autoriteit 2%

Controleer uw Lazy-module, ik heb AppRoutingModule geïmporteerd in de luie module. Na het verwijderen van de import en import van AppRoutingModule, begon Mine te werken.

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

Antwoord 10

In mijn geval, Angular 6, heb ik de map- en bestandsnamen van mijn modules hernoemd van google.map.module.ts naar google-map.module.ts.
Om te compileren zonder overlay met oude module- en componentnamen, heeft ng compiler zonder fouten gecompileerd.
voer hier de afbeeldingsbeschrijving in

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

Antwoord 11

Ik kwam hetzelfde probleem tegen.
Ik had een ander onderdeel met dezelfde naam gemaakt onder een andere map.
dus in mijn app-module moest ik beide componenten importeren, maar met een truc

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

In declaraties zou ik in plaats daarvan AdminDuplicateComponent kunnen toevoegen.

Ik dacht gewoon dat ik dat daar zou laten voor toekomstig gebruik.


Antwoord 12

Je kunt dit in twee simpele stappen oplossen:

Voeg uw componnet(HomeComponent) toe aan declarationsarray entryComponentsarray.

Omdat dit onderdeel geen toegang heeft tot de throw-selector of router,
het toevoegen van dit aan de entryComponnets-array is belangrijk

zie hoe u dit moet doen:

@NgModule({
  declarations: [
    AppComponent,
    ....
    HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [HomeComponent]
})
export class AppModule {} 

Antwoord 13

In mijn geval was ik de component UserComponentaan het verplaatsen van de ene module appModulenaar een anderedashboardModuleen vergat ik de routedefinitie uit de routering van de vorige moduleappModulein AppRoutingModule-bestand.

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

Nadat ik de routedefinitie had verwijderd, werkte het prima.


Antwoord 14

Ik kreeg deze fout omdat ik dezelfde naam van een component had in 2 verschillende modules. Een oplossing is als het gedeelde gebruik de exporttechniek enz. Maar in mijn geval moesten beide dezelfde naam hebben, maar het doel was anders.

Het echte probleem

Dus tijdens het importeren van component B importeerde de intellisense het pad van component A, dus ik moest de tweede optie van het componentpad van intellisense kiezen en dat loste mijn probleem op.


Antwoord 15

als u lui laden gebruikt, moet u die module in elke routermodule laden, zoals in app-routing.module.ts {path:’home’,loadChildren:’./home.module#HomeModule’}


Antwoord 16

Mijn geval is hetzelfde als @7guyo vermeldde. Ik gebruik lazyloading en deed dit onbewust:

import { component1Route } from './path/component1.route';
export const entityState: Routes = [
{
   path: 'home',
   children: component1Route
}]

In plaats van:

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

Antwoord 17

Als je lazy load gebruikt, moet je de module van je component en de routeringsmodule uit de app-module verwijderen. Als je dat niet doet, zal het proberen ze te laden wanneer de app is gestart en die foutmelding geeft.

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

Antwoord 18

In mijn geval heb ik verkeerd geïmporteerd,
In moduleplaats in plaats van module importeren (DemoModule) geïmporteerde routeringsmodule (DemoRoutingModule)

Verkeerde import:

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

Juiste code

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

Antwoord 19

Controleer of uw component correct is geïmporteerd in app-routing.module.ts. In mijn geval was dat de reden


Antwoord 20

Vereisten:
1. Als je meerdere modules hebt
2. En je gebruikt een component (stel DemoComponent) uit een andere module (stel AModule), in een andere module (stel BModule)

Dan zou uw AMModule moeten zijn

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

en uw BModule zou moeten zijn

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

Antwoord 21

In sommige gevallen kan hetzelfde gebeuren als je een module voor HomeComponent hebt gemaakt en in app-routing.module je beide direct hebt gegeven

component: HomeComponent,
loadChildren:”./modules/…/HomeModule.module#HomeModule”
in Routes-array.

wanneer we lui laden proberen, geven we alleen het kenmerk loadChildren.

Other episodes