Angular 类型X声明2模块的一部分-解决方案不'；不能使用动态组件

我在主应用程序模块中使用了一个组件。它基本上会生成动态组件，我将其用于各种模态。我还构建了一个用于处理表单向导的设置模块，我希望在设置模块的一部分中使用相同的组件。一切正常，但当我尝试使用导入主应用程序模块的共享组件时，我遇到以下错误：

动态组件的代码在这篇文章的最底部

因此，我将代码导入我的设置模块，如下所示：

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [
    SetupModalPageComponent,
    SetupModalComponent,

    DynamicFormComponent,
    DynamicComponent, /* IMPORT HERE */

    /* Modals */
    SetupDeviceComponent,
    SetupEulaComponent,
    SetupProfileComponent
  ],
  providers: [
    SetupModalService
  ],
  exports: [
    SetupModalPageComponent,
    SetupModalComponent,

    DynamicFormComponent,
    DynamicComponent /* IMPORT HERE */
  ]
})

然后我得到以下错误：

我发现了几个关于这个问题的帖子，大多数帖子都说在主应用程序模块中使用这个组件，这应该可以让所有其他模块都可以使用。这显然对我不起作用。我还尝试将exports属性添加到主应用程序模块中，并导出DynamicComponent，这对我来说也不起作用

任何想法都将不胜感激。谢谢

动态组件：

导入{
组成部分
输入
ViewContainerRef，
ViewChild，
反射射束，
组件工厂分解器
}从“@angular/core”开始；
/***可用组件***/
/*设置组件*/
从“../../modules/setup/components/dynamic forms/setup device/setup device.component”导入{SetupDeviceComponent}；
从“../../modules/setup/components/dynamic forms/setup eula/setup eula.component”导入{SetupEulaComponent}；
从“../../modules/setup/components/dynamic forms/setup profile/setup profile.component”导入{SetupProfileComponent}；
/*模态分量*/
从“../site/modals/modals/alert/alert.modal”导入{AlertModal}；
从“../site/modals/modals/change password/change password.modal”导入{ChangePasswordModal}；
从“../site/modals/modals/confirm/confirm.modal”导入{ConfirmModal}；
@组成部分({
选择器：“动态组件”，
入口组件：[
/*设置组件*/
设置设备组件，
设置EULAComponent，
设置配置文件组件，
/*模态分量*/
警报模式，
ChangePasswordModal，
确认模态
],
模板：``，
})
导出类DynamicComponent{
currentComponent:any=null；
@ViewChild（'dynamicComponentContainer'{
阅读：ViewContainerRef
})dynamicComponentContainer:ViewContainerRef；
@Input（）设置componentData（数据：{component:any，inputs:any}）{
如果（！数据）{
回来
}
让inputProviders=Object.keys（data.inputs）.map（（inputName）=>{
返回{
提供：inputName，
useValue:data.inputs[inputName]
};
});
让resolvedInputs=ReflectiveInjector.resolve（inputProviders）；
让喷油器=ReflectiveInjector.fromResolvedProviders(
决心,，
此文件为.dynamicComponentContainer.parentInjector
);
让factory=this.resolver.resolveComponentFactory（data.component）；
让组件=工厂创建（喷油器）；
this.dynamicComponentContainer.insert（component.hostView）；
if（此.currentComponent）{
this.currentComponent.destroy（）；
}
this.currentComponent=组件；
}
构造函数（专用冲突解决程序：ComponentFactoryResolver）{}
}

我通过从AppModule中删除导入声明并将导入声明和导出保留在SetupModalModule中解决了这个问题。现在，在AppModule中声明的组件仍然可以工作，即使依赖项在另一个模块中声明。如图所示。

在哪个模块中声明和导出了DynamicComponent

SetupModalModule

或

AppModule

？我在AppModule中声明了它，并且在SetupModalModule中声明并导出了它。我刚刚注意到了一些东西。我从AppModule中删除了导入声明，只在SetupModalModule中保留了导入和导出，并且在AppModule中声明的使用DynamicComponent的组件仍然有效。这是正确的做法吗？根据从子模块导出的组件，我会将组件作为主要应用程序组件，这让我感到有点困惑。您必须在一个模块

SetupModalModule

中声明并导出该组件，然后在

AppModule

中导入该模块。是的，我就是这样做的。我只是觉得有点困惑。谢谢

import {
  Component,
  Input,
  ViewContainerRef,
  ViewChild,
  ReflectiveInjector,
  ComponentFactoryResolver
} from '@angular/core';

/*** Available Components ***/
/* Setup Components */
import { SetupDeviceComponent } from '../../modules/setup/components/dynamic-forms/setup-device/setup-device.component';
import { SetupEulaComponent } from '../../modules/setup/components/dynamic-forms/setup-eula/setup-eula.component';
import { SetupProfileComponent } from '../../modules/setup/components/dynamic-forms/setup-profile/setup-profile.component';
/* Modal Components */
import { AlertModal } from '../site/modals/modals/alert/alert.modal';
import { ChangePasswordModal } from '../site/modals/modals/change-password/change-password.modal';
import { ConfirmModal } from '../site/modals/modals/confirm/confirm.modal';

@Component({
  selector: 'dynamic-component',
  entryComponents: [
    /* Setup Components */
    SetupDeviceComponent,
    SetupEulaComponent,
    SetupProfileComponent,

    /* Modal Components */
    AlertModal,
    ChangePasswordModal,
    ConfirmModal
  ],
  template: `<div #dynamicComponentContainer></div>`,
})

export class DynamicComponent {
  currentComponent: any = null;

  @ViewChild('dynamicComponentContainer', {
    read: ViewContainerRef
  }) dynamicComponentContainer: ViewContainerRef;

  @Input() set componentData(data: {component: any, inputs: any }) {
    if (!data) {
      return;
    }

    let inputProviders = Object.keys(data.inputs).map((inputName) => {
      return {
        provide: inputName,
        useValue: data.inputs[inputName]
      };
    });

    let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
    let injector = ReflectiveInjector.fromResolvedProviders(
      resolvedInputs,
      this.dynamicComponentContainer.parentInjector
    );
    let factory = this.resolver.resolveComponentFactory(data.component);
    let component = factory.create(injector);

    this.dynamicComponentContainer.insert(component.hostView);

    if (this.currentComponent) {
      this.currentComponent.destroy();
    }

    this.currentComponent = component;
  }

  constructor(private resolver: ComponentFactoryResolver) {}
}