在具有多个模块的Angular 6应用程序中共享一个组件

我将一个大模块拆分为几个较小的模块,并出现以下问题: 1.搜索组件在多个组件之间使用。目前它是在app.module.ts中声明的。稍后,它将移动到shared.module.ts。 2.包装器组件使用搜索组件。当我创建simple wrapper.module.ts时,我得到一个错误,即app search不是已知元素。若我在wrapper.module.ts中声明它,我将得到一个错误,搜索组件在两个不同的模块中声明,这是有意义的。 CLI重新启动没有帮助。”“应用程序搜索”是正确的选择器名称。

app.module.ts:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { WrapperModule } from '../wrapper/wrapper.module';
import { SearchComponent } from '../search/search.component';

@NgModule({
 imports: [
  CommonModule,
  WrapperModule
 ],
 declarations: [
  AppComponent,
  SearchComponent
 ]
})
export class AppModule {}

包装器模块:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { WrapperComponent } from './wrapper.component';

@NgModule({
  imports: [
   CommonModule
  ],
  declarations: [
   WrapperComponent
  ],
  exports: [
   WrapperComponent
  ],
 })
export class WrapperModule {}

Wrapper.component.html

<app-search></app-search>

搜索组件.ts

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
})
...