组件的导入不能以Angular 工作

我创造了一个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 {}