Angular Can'；t从其他模块加载惰性模块中的指令

我在加载指令时遇到问题，导致可怕的

无法绑定到'hapPluginSlot'，因为它不是'ng container'的已知属性。

在我的项目中，我有以下设置

app
  - shared
      shared.module
      - directives
          directives.module
          plugin-slot.directive
  - protected
      protected.module
      - home
          home.module (lazy loaded)
          home.component

我在各自的文件中有以下代码

插件插槽指令

@Directive({
  selector: '[hapPluginSlot]'
})
export class PluginSlotDirective {

  @Input() name: string;
  @Input() type: string;

  constructor() {
    console.log(this.name, this.type);
  }

}

@NgModule({
  imports: [
    /* Angular Imports */
    CommonModule
  ],
  declarations: [
    PluginSlotDirective
  ],
  exports: [
    PluginSlotDirective
  ]
})
export class DirectivesModule { }

@NgModule({
  imports: [
    /* Angular Imports */
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    ...
    /* Application Imports */
    PipesModule,
    DirectivesModule,
    ComponentsModule
  ],
  declarations: [
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    PipesModule,
    DirectivesModule,
    ComponentsModule,
    ...
  ]
})
export class SharedModule { }

指令.模块

@Directive({
  selector: '[hapPluginSlot]'
})
export class PluginSlotDirective {

  @Input() name: string;
  @Input() type: string;

  constructor() {
    console.log(this.name, this.type);
  }

}

@NgModule({
  imports: [
    /* Angular Imports */
    CommonModule
  ],
  declarations: [
    PluginSlotDirective
  ],
  exports: [
    PluginSlotDirective
  ]
})
export class DirectivesModule { }

@NgModule({
  imports: [
    /* Angular Imports */
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    ...
    /* Application Imports */
    PipesModule,
    DirectivesModule,
    ComponentsModule
  ],
  declarations: [
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    PipesModule,
    DirectivesModule,
    ComponentsModule,
    ...
  ]
})
export class SharedModule { }

共享。模块

@Directive({
  selector: '[hapPluginSlot]'
})
export class PluginSlotDirective {

  @Input() name: string;
  @Input() type: string;

  constructor() {
    console.log(this.name, this.type);
  }

}

@NgModule({
  imports: [
    /* Angular Imports */
    CommonModule
  ],
  declarations: [
    PluginSlotDirective
  ],
  exports: [
    PluginSlotDirective
  ]
})
export class DirectivesModule { }

@NgModule({
  imports: [
    /* Angular Imports */
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    ...
    /* Application Imports */
    PipesModule,
    DirectivesModule,
    ComponentsModule
  ],
  declarations: [
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    PipesModule,
    DirectivesModule,
    ComponentsModule,
    ...
  ]
})
export class SharedModule { }

我正在将

SharedModule

导入我的

home.module

，如下所示

@NgModule({
  imports: [
    SharedModule, //<--- shared module imported here
    HomeRouterModule
  ],
  declarations: [
    HomeComponent
  ]
})
export class HomeModule { }

@NgModule({
进口：[
SharedModule，//这是一个语法问题，第一个解决方案是像这样使用您的指令：

<ng-container hapPluginSlot type="route"></ng-container>

<ng-container [hapPluginSlot]="route"></ng-container>

这样称呼它：

<ng-container hapPluginSlot type="route"></ng-container>

<ng-container [hapPluginSlot]="route"></ng-container>


您是否尝试过
？