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 serve
gebruikt).
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 declarations
op 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.ts
deze foutmeldingen. Oplossing was om in plaats daarvan RouterTestingModule
te 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.
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 declarations
array entryComponents
array.
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 UserComponent
aan het verplaatsen van de ene module appModule
naar een anderedashboardModule
en vergat ik de routedefinitie uit de routering van de vorige moduleappModule
in 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.