I have 2 components, first one is modules/pages/home/home.component and the second one is modules/pages/home/components/banner I want to use banner component in home component. when i try to use i get this error
In the same module
@NgModule({
imports: [...],
declarations: [AComponent,BComponent,...],
})
export class AllInOneModule {}
In different Module
//Module "A"
@NgModule({
imports: [...],
declarations: [AComponent,...],
exports: [AComponent],
})
export class AModule {}
//Module "B"
@NgModule({
imports: [AModule...],
declarations: [BComponent,...],
})
export class BModule {}
imports of your AppModule the PagesModule ?import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; ; import { HomeComponent } from './home/home.component'; import { PagesRoutingModule } from './pages-routing.module'; import { HowItWorksComponent } from './how-it-works/how-it-works.component'; import { BannerComponent } from './home/components/banner/banner.component'; @NgModule({ declarations: [HomeComponent, HowItWorksComponent, BannerComponent], imports: [CommonModule, PagesRoutingModule], }) export class PagesModule {}From your folder structure it looks like both components should be part of the same module.
So go to home.module.ts or whatever @NgModule you have, and make sure app-banner is part of the declarations array.
Alternatively, if app-banner is part of separate module, be sure to add that other module inside home.module's import array.
There should be an app.module.ts file in your project, inside it you'll find @NgModule, and then there should be declarations property (it's an array). Try to insert your BannerComponent in there and call your banner component using it's selector in home.component.html.
after import and declare the component in app.moudle.ts it works
