Невозможно использовать асинхронный канал в шаблоне динамически сгенерированного компонента в динамически сгенерированном модуле Angular в режиме AOT

Отказ от ответственности: этот вопрос был навеян "Вот что вам нужно знать о динамических компонентах в Angular" на Medium.

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

Это прекрасно работает в базовой настройке.

Теперь давайте предположим, что мы хотим динамически генерировать компонент, но на этот раз с шаблоном, который использует async труба.

• AOT включен
• enableProdMode() был вызван при начальной загрузке приложения

Поскольку компилятор Angular недоступен, мы можем предоставить экземпляр jit-компилятора. для токена компилятора в корневом модуле приложения.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import {Compiler, NgModule} from '@angular/core';

import {AppComponent } from './app.component';
import {JitCompilerFactory} from '@angular/platform-browser-dynamic';

export function jitCompiler() {
  /*
   * Cast JitCompilerFactory to any because
   * jit compiler factory constructor does not
   * accept any arguments according to the @angular/platform-browser-dynamic/src/compiler_factory.d.ts
   */
  const klass = (JitCompilerFactory as any);
  return new klass([]).createCompiler([
    {
      useJit: true
    }
  ]);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  providers: [
    {
      provide: Compiler,
      useFactory: jitCompiler
    }
  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Compiler,
  Component,
  NgModule,
  ViewContainerRef
} from '@angular/core';
import {Subject} from 'rxjs';
import {CommonModule} from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit {
  constructor(
    private readonly compiler: Compiler,
    private readonly vcr: ViewContainerRef
  ) {}
  ngAfterViewInit() {
    const template = '<span>Hello, {{text$ }}</span>';
    const cmp = Component({
      template
    })(class DynamicComponent {
      text$: Subject<string>;
    });

    const module = NgModule({
      declarations: [cmp],
      imports: [CommonModule],
      providers: []
    })(class DynamicModule {});

    this.compiler.compileModuleAndAllComponentsAsync(module)
      .then(compiledModule => {
        const dynamicComponent = this.vcr.createComponent(compiledModule.componentFactories[0]);

        const sub = new Subject();
        sub.next('World!');
        dynamicComponent.instance.text$ = sub;

        // Just to simulate some server updates
        setTimeout(() => dynamicComponent.instance.text$.next('Another'), 3e3);
      });
  }
}

Если мы запустим это и откроем DevTools, мы увидим следующую ошибку:

ОШИБКА Ошибка: Неожиданное значение "function(){}" импортировано модулем "function(){}". Пожалуйста, добавьте аннотацию @NgModule.

Проблема возникает только в режиме разработки. Угловая версия 7.2.0.

Отсюда вопрос - что надо сделать, чтобы он заработал в режиме АОТ?