Как создать динамический компонент в Angular 6, когда включен режим Prod - PullRequest
0 голосов
/ 16 мая 2018

У меня было требование, когда я создавал динамический компонент, используя angular5.Я написал директиву, которая генерирует компонент.Он отлично работал в режиме dev / prod.Но при обновлении приложения до angular6 оно работает не так, как в режиме prod, когда AOT включен, класс компилятора недоступен.как я могу изменить дизайн моего soln, чтобы он работал в angular6?

export class HtmlOutletDirective implements OnChanges {
@Input() html: string;
constructor(private vcRef: ViewContainerRef, private compiler: Compiler, 
private translate: TranslateService) {
}

ngOnChanges() {
const html = this.html;
if (!html) { return; }

@Component({
  selector: 'ccw-dynamic-component',
  template: `
    <div [innerHtml]="innerHtmlTemplate">
    </div>
    `
})

class DynamicHtmlComponent {
  private innerHtmlTemplate: any = '';
  constructor(private httpClient: HttpClient, private sanitizer: DomSanitizer) {
    this.httpClient.get(html, { responseType: 'text' }).subscribe((htmlContent) => {
      this.innerHtmlTemplate = sanitizer.bypassSecurityTrustHtml(htmlContent.toString());
    });
  }
}

@NgModule({
  imports: [CommonModule],
  declarations: [DynamicHtmlComponent]
})

class DynamicHtmlModule { }

this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
  .then(factory => {
    const compFactory = factory.componentFactories.find(x => x.componentType === DynamicHtmlComponent);
    const compRef = this.vcRef.createComponent(compFactory, 0);
  });
 }

Я называю свою директиву следующим образом в моем компоненте:

   <mat-accordion [multi]="true">
        <mat-expansion-panel *ngFor='let releaseNote of releaseNotes'>
            <mat-panel-description>
                <dcHtmlOutlet [html]="releaseNote.html"></dcHtmlOutlet>
            </mat-panel-description>
        </mat-expansion-panel>
    </mat-accordion>

Ниже приведена ошибка, которую я получаю:

 Runtime compiler is not loaded Error stack trace: Error: Runtime compiler is not loaded at Le (main.00612d315fe86075b5fb.js:1) at t.compileModuleAndAllComponentsAsync
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...