Как создать компонент из уже импортированного модуля?

Question

У меня есть модальный сервис, который отвечает за открытие модального диалога «на лету», чья подпись create<T>(component: Type<T>, params?: Object, module: Type<{}> = AppModule): Observable<ComponentRef<T>>. Модальная услуга предназначена для проблемы. Проблема заключается в том, что когда я импортирую уже импортированный модуль, я получаю ошибку Unexpected value 'undefined' declared by the module 'MyModule'. Исследования показывают, что это обычная проблема при попытке импортировать вещи дважды.

ModalService -

import { Injectable, ComponentRef, ComponentFactoryResolver, ViewContainerRef, ReflectiveInjector, Injector, Compiler, Type } from '@angular/core'; 
import { Observable, ReplaySubject } from 'rxjs'; 
import { AppModule } from '../../app.module'; 

@Injectable() 
export class ModalService { 
    vcRef: ViewContainerRef; 

    constructor(private componentFactoryResolver: ComponentFactoryResolver, 
       private compiler: Compiler, 
       private injector: Injector) { 
    } 

    registerViewContainerRef(vcRef: ViewContainerRef): void { 
     this.vcRef = vcRef; 
    } 

    create<T>(component: Type<T>, params?: Object, module: Type<{}> = AppModule): Observable<ComponentRef<T>> { 
     let componentRef$ = new ReplaySubject(); 

     this.compiler.compileModuleAndAllComponentsAsync(module) 
      .then(factory => { 
       let componentFactory = factory.componentFactories 
        .filter(item => item.componentType === component)[0]; 
       const childInjector = ReflectiveInjector.resolveAndCreate([], this.injector) 
       let componentRef = this.vcRef.createComponent(componentFactory, 0, childInjector); 

       Object.assign(componentRef.instance, params); 

       componentRef$.next(componentRef); 
       componentRef$.complete(); 
      }); 

     return <Observable<ComponentRef<T>>> componentRef$.asObservable(); 
    } 
} 

сниппет Использование при попытке открыть модальный диалог с компонентом FooComponent, который принадлежит MyModule.

import { MyModule } '../my.module'; 
this.modalService.create(FooComponent, {}, MyModule) 

На основании документации модуль необходим при создании компонентов, если он был лениво загружен.

Мой вопрос в том, как я могу создать компоненты, которые принадлежат к любому уже загруженному модулю.

Редактировать! Это работает, если компонент, который я динамически создаю, не имеет никаких зависимостей, что вряд ли произойдет часто.

См. Plunker here. Места, где возникают проблемы, - файлы app/core/modal/modal.service.ts и app/crisis-center/crisis-list.component.ts (строка 54 - там, где модаль должен открыться). Ошибка, которая появляется, равна Uncaught (in promise): Error: No provider for MyService!. Не знаю, почему, так как я создаю свой компонент из модуля, где MyService определяется как поставщик.

Возможно, существует лучший подход к достижению этого?

TL; DR Целью является создание службы (ModalService в моем случае), где любой компонент может быть создан независимо от того, к какому модулю он принадлежит. Очевидно, что он должен поддерживать DI.

Answer 1

Каждый раз, когда я получаю эту ошибку, перезапуск моей CLI исправляет проблему. Легко попробовать сначала, прежде чем погрузиться в мой код.