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

CodePudding user response：

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

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

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