0

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

  1. If 'app-banner' is an Angular component, then verify that it is part of this module.
  2. If 'app-banner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. how can i solve this?

4 Answers 4

4
  1. To use a component "A" this component must be declared in a Module
  2. To use a component "A" in another component "B", the two component can be declared in the same module or in different module (Imagine declare in module "A" and in module "B") but, in this case, the module "A" must be "export" the component "A", and the module "B" must be import the module "A"

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 {}
Sign up to request clarification or add additional context in comments.

3 Comments

i am trying to use banner component in home component & the banner component folder is placed same where the home componet resides
Has you include in the array imports of your AppModule the PagesModule ?
pages.modules.ts 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 {}
1

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.

2 Comments

there is no file with name module in home directory
well in home folder it contains home.component files and in same place i have a folder name components
1

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.

3 Comments

in app.module.ts i have added the this: import { BannerComponent } from './modules/pages/home/components/banner/banner.component'; and in ngmodule: BannerComponent, but getting same error
page.module.ts <br/> 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 {}
app.module.ts ` import { HomeComponent } from './modules/pages/home/home.component'; import { NavbarComponent } from './components/navbar/navbar.component'; import { FooterComponent } from './components/footer/footer.component'; import { BannerComponent } from './modules/pages/home/components/banner/banner.component'; @NgModule({ declarations: [ AppComponent, NavbarComponent, FooterComponent, ],
0

after import and declare the component in app.moudle.ts it works

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.