Type X part of declarations 2 Modules - solution doesn't work with Dynamic Component

Question

I have a component that I am using in the main application module. It basically generates dynamic components which I am using for a variety of modals. I also built a setup module for handling form wizards and I wanted to use the same component for part of the setup module. Everything works but when I tried to use the shared component which was imported into the main application module I was getting the following error:

The code for the dynamic-components is at the very bottom of this post.

So I imported the code into my setup module as follows:

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

    DynamicFormComponent,
    DynamicComponent, /* IMPORT HERE */

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

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

Then I get the following error:

I have found several posts with this issue and most have said the use the component in the main application module which should make it available to all the other modules. That obviously didn't work for me. I also tried to add an exports property to the main application module and export the DynamicComponent which also did not work for me.

Any ideas would be appreciated. Thanks.

Dynamic Component:

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

Answer 1

I fixed this by removing the import declaration from the AppModule and leaving the import declaration and export in the SetupModalModule. Now the components that are declared in the AppModule still work even though the dependency is declared in another module. Go figure.