angularangular-componentsangular-module

import of component not working in angular


I'm trying to use side-bar.component in home-itens.component, but for some reason it's saying that 'app-side-bar' is not a known element

home-itens.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SideBarModule } from './../side-bar/side-bar.module';
import { HomeItensRoutingModule } from './home-itens-routing.module';

@NgModule({
imports: [
   CommonModule,
   HomeItensRoutingModule,
   SideBarModule
  ],
})
export class HomeItensModule { }

side-bar.module:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { PoModule } from '@po-ui/ng-components';
import { SideBarComponent } from './side-bar.component';
import { PoMenuPanelModule } from '@po-ui/ng-components';

@NgModule({
  declarations: [
     SideBarComponent
  ],
  imports: [
    PoModule,
    CommonModule,
    RouterModule,
    PoMenuPanelModule,
 ],
 exports:[
   SideBarComponent
 ]
 })
export class SideBarModule {}

Solution

  • I've created a working stackblitz here.

    1. side-bar.module.ts
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { SideBarComponent } from './side-bar.component';
    
    @NgModule({
      imports: [CommonModule],
    
      // add the 'SideBarComponent' to the module declaration
      declarations: [SideBarComponent], 
    
      // export the 'SideBarComponent' for use by other components and modules, 
      // and in this case the 'HomeItemsModule'
      exports: [SideBarComponent], 
    })
    export class SideBarModule {}
    
    
    1. home-items.module.ts
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { HomeItemsComponent } from './home-items.component';
    import { SideBarModule } from '../side-bar/side-bar.module';
    
    @NgModule({
      //import the 'SideBarModule': it contains the 'SideBarComponent'
      imports: [CommonModule, SideBarModule], 
    
      // add the 'HomeItemsComponent' to your module declaration
      declarations: [HomeItemsComponent],
    
      exports: [HomeItemsComponent],
    })
    export class HomeItemsModule {}
    
    
    1. app.module.ts
    
    import { AppComponent } from './app.component';
    import { HomeItemsModule } from './home-items/home-items.module';
    
    @NgModule({
      // import the 'HomeItemsModule' here. Recall that it already includes the    
      // 'SideBarModule' so we do not need to import it again
      imports: [BrowserModule, FormsModule, SideBarModule,HomeItemsModule],
      declarations: [AppComponent],
      bootstrap: [AppComponent],
    })
    export class AppModule {}