angular 2 Reactive form动态字段错误未找到未定义的组件工厂

Question

我正在通过本教程https://toddmotto.com/angular-dynamic-components-forms进行动态字段，并且遇到问题 错误：

ERROR Error: No component factory found for undefined. 

您是否将其添加到@ NgModule.entryComponents？

http://joxi.ru/DmBgxL5uNodx02你可以看到我在我的应用程序中有表单，当我在google中找到这个错误时我找到了解决方案，我应该添加条目组件，但我已经拥有它http://joxi.ru/52aXRz9cGy9e0m 你能说出我做错了吗？

testing.component.ts

 import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-testing',
  template: `
    <div class="app">
      <dynamic-form [config]="config"
                    (submitted)="formSubmitted($event)"></dynamic-form>
    </div>`,
  styleUrls: ['./testing.component.css']
})
export class TestingComponent {

  config = [
    {
      type: 'input',
      label: 'Full name',
      name: 'name',
      placeholder: 'Enter your name'
    },
    {
      type: 'select',
      label: 'Favourite food',
      name: 'food',
      options: ['Pizza', 'Hot Dogs', 'Knakworstje', 'Coffee'],
      placeholder: 'Select an option'
    },
    {
      label: 'Submit',
      name: 'submit',
      type: 'button'
    },
  ];

  formSubmitted(value) {
    console.log(value);
  }

}

动态form.component.ts

    import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';

@Component({
  selector: 'dynamic-form',
  template: `
    <form
            class="dynamic-form"
            [formGroup]="form"
            (ngSubmit)="submitted.emit(form.value)">
      <ng-container
              *ngFor="let field of config;"
              dynamicField
              [config]="field"
              [group]="form">
      </ng-container>
    </form>
  `,
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {

  @Input() config: any[] = [];

  form: FormGroup;

  @Output()
  submitted: EventEmitter<any> = new EventEmitter<any>();

  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {
    this.form = this.createGroup();
  }

  createGroup() {
    const group = this.fb.group({});
    this.config.forEach(control => group.addControl(control.name, this.fb.control('')));
    return group;
  }

}

形状input.component.ts

    import { Component, OnInit } from '@angular/core';
import {FormGroup} from '@angular/forms';

@Component({
  selector: 'form-input',
  template: `
    <div 
      class="dynamic-field form-input" 
      [formGroup]="group">
      <label>{{ config.label }}</label>
      <input
        type="text"
        [attr.placeholder]="config.placeholder"
        [formControlName]="config.name" />
    </div>
  `,
  styleUrls: ['./form-input.component.css']
})
export class FormInputComponent implements OnInit {

  config;
  group: FormGroup;

  constructor() { }

  ngOnInit() {
  }

}

动态field.directive.ts

    import {ComponentFactoryResolver, Directive, Input, OnInit, ViewContainerRef} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {FormInputComponent} from '../form-input/form-input.component';

const components = {
  input: FormInputComponent
};

@Directive({
  selector: '[dynamicField]'
})
export class DynamicFieldDirective implements OnInit{

  @Input() config;

  @Input() group: FormGroup;
  component;

  constructor(private resolver: ComponentFactoryResolver,
              private container: ViewContainerRef) {

  }

  ngOnInit() {
    const component = components[this.config.type];
    const factory = this.resolver.resolveComponentFactory<any>(component);
    this.component = this.container.createComponent(factory);
    this.component.instance.config = this.config;
    this.component.instance.group = this.group;
  }

}

user.module.ts

    import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {PasswordStrengthBarModule} from 'ng2-password-strength-bar';

import {UserService} from './service/user.service';

import {MaterialModule} from '../../shared/mat.module';
import {UserRoutingModule} from './user-routing.module';

import {DynamicFormComponent} from './dynamic-fields/containers/dynamic-form/dynamic-form.component';
import {LoginComponent} from './login/login.component';
import {TestingComponent} from './dynamic-fields/testing/testing.component';
import {UserComponent} from './user.component';
import {RegistrationComponent} from './registration/registration.component';
import { FormInputComponent } from './dynamic-fields/components/form-input/form-input.component';
import { DynamicFieldDirective } from './dynamic-fields/components/dynamic-field/dynamic-field.directive';

@NgModule({
  declarations: [
    UserComponent,
    RegistrationComponent,
    LoginComponent,
    DynamicFormComponent,
    TestingComponent,
    FormInputComponent,
    DynamicFieldDirective
  ],
  imports: [
    CommonModule,
    MaterialModule,
    ReactiveFormsModule,
    PasswordStrengthBarModule,
    HttpClientModule,
    UserRoutingModule,
    FormsModule
  ],
  exports: [
    UserComponent,
    DynamicFormComponent
  ],
  providers: [
    UserService
  ],
  entryComponents: [
    FormInputComponent
  ]
})
export class UserModule {
}

http://joxi.ru/J2bx3VoH4axvxr