Angular2 RC 5. Не найдена фабрика компонентов для динамически загружаемых компонентов

Question

Я пытаюсь обновить загрузчик динамических компонентов с RC4 до RC5, так как ComponentResolver устарел. Я обновил загрузчик до следующего

@Component({
    selector: 'component-dispatcher',
    template: `<div #container></div>` // Define the template here because of its brevity
})
export class ComponentDispatcherComponent implements OnInit, OnDestroy {
    @Input() component:any; // Some dynamic component to render
    @Input() options:any;   // Component configuration, optional
    @Input() data:any;      // Data to render within the component

    // Inject the dynamic component onto the DOM
    @ViewChild("container", {read: ViewContainerRef}) container:ViewContainerRef;

    private componentReference:ComponentRef<any>;

    constructor(private resolver:ComponentFactoryResolver) {
    }

    ngOnInit() {
        // Create our component now we're initialised
        let componentFactory = this.resolver.resolveComponentFactory(this.component);
        this.componentReference = this.container.createComponent(componentFactory);
        this.componentReference.instance.data = this.data;
        this.componentReference.instance.options = this.options;
    }

    ngOnDestroy() {
        // If we have a component, make sure we destroy it when we lose our owner
        if (this.componentReference) {
            this.componentReference.destroy();
        }
    }
}

И попытаться динамически загрузить следующий компонент в DOM

@Component({
    selector: 'text-cell',
    pipes: [IterableObjectPipe],
    templateUrl: './text-cell.component.html',
    styles: ['.fieldName { font-weight: bold; }']
})
export class TextCellComponent implements OnInit {
    // Data to render within the component
    @Input() data: any;
    @Input() record: any;

    // Configuration of what data to display
    @Input() options: {
        excludeFieldNames: boolean,
        translation: string
    };

    constructor() {
    }

    ngOnInit() {
        setTimeout(() => {
            //console.log('***************************** ngOnInit...textCell ***********************');
            this.options.translation = '' + (_.get(this.options, 'translation') || 'fields');
        });
    }
}

Тем не менее, когда я делаю это с моим TextCellComponent или любым другим компонентом в приложении, я получаю следующую ошибку

ORIGINAL EXCEPTION: No component factory found for TextCellComponent
ORIGINAL STACKTRACE:
Error: No component factory found for TextCellComponent
at NoComponentFactoryError.BaseException [as constructor]      
(webpack:///./~/@angular/core/src/facade/exceptions.js?:27:23)
at new NoComponentFactoryError 

Я завершил шаги в

https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

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

РЕДАКТИРОВАТЬ

Добавление определения модуля

@NgModule({
    imports: [
        BrowserModule, 
        HttpModule, 
        FormsModule, 
        ReactiveFormsModule, 
        ...MATERIAL_MODULES
    ],
    declarations: [
        ...APPLICATION_PIPES, 
        ...APPLICATION_COMPONENTS, 
        ...APPLICATION_DIRECTIVES, 
        CygnusComponent,
        // Component declarations
        // TODO: refactor to appropriate modules
        ...
        ComponentDispatcherComponent,
        TextCellComponent,
        ...
    ],
    bootstrap: [
        ApplicationComponent
    ],
    providers: [
        ...APPLICATION_PROVIDERS, 
        AppStore
    ]
})
export class ApplicationComponent {}

Answer 1

Все компоненты, которые должны быть загружены "динамически", должны быть объявлены в entryComponents раздел вашего модуля. Другими словами, вы должны получить что-то вроде:

@NgModule({
    imports: [BrowserModule, HttpModule, FormsModule, ReactiveFormsModule, ...MATERIAL_MODULES],
    declarations: [...APPLICATION_PIPES, ...APPLICATION_COMPONENTS, ...APPLICATION_DIRECTIVES, CygnusComponent,
        // Component declarations
        // TODO: refactor to appropriate modules
        ...
        ComponentDispatcherComponent,
        TextCellComponent,
        ...
    entryComponents: [TextCellComponent]
    bootstrap: [ApplicationComponent],
    providers: [...APPLICATION_PROVIDERS, AppStore]
})
export class ApplicationComponent{

Обратите внимание, что вам нужно перечислить TextCellComponent в обоих declarations а также entryComponents раздел.

Answer 2

Вы можете проверить свои пути импорта. В моем случае один импорт файлов использовал прописные буквы, а другой - строчные.

//file 1
import { IRComponent } from "./components/IR/IR.component";
//file 2
import { IRComponent } from "./components/ir/ir.component";

Раздача была во вкладке сети Chrome, я заметил, что файл загружался дважды (один раз для каждого написания).

Answer 3

Скажем TextCellComponent заявлено в FooModule и ваш компонент, отвечающий за создание динамического контента, находится в модуле BarModule.

В таком случае FooModule необходимо импортировать в BarModule

@NgModule({
 imports: [FooModule],
declarations: [ComponentDispatcherComponent]
})
export class BarModule {}

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

Answer 4

Иногда вы сталкиваетесь с этой проблемой, даже если вы указали Компонент в ваших EntryComponents, а также Объявления.

В этих ситуациях вам просто нужно ввести имя этого компонента (здесь TextCellComponent) выше всех других компонентов, как показано ниже:

declarations: [ 
        TextCellComponent // Declared above
        CygnusComponent,
        ComponentDispatcherComponent,
        ...
    ]

Это также должно быть сделано в entryComponents.

Надеюсь, это поможет.

Answer 5

Вам нужно импортировать MatDialogModule в Module чтобы он знал о entryComponents там.