使用ɵ编译组件(Angular 9)创建的带有动态模板的Angular组件不能在生产模式下工作

Question

我在Angular 9中创建了一个动态组件。我在html模板中有一个<ul>标记，它的子元素是从服务器动态加载的(服务器将使用handlebar模板返回像<li>One</li><li>Two</li><li (click)="onLinkClicked(3)">Three</li>这样的值)。

    private createComponentFromRaw(template: string, containerRef: ElementRef) {
        class DynamicComponent {
            onLinkClicked(resource: any) {
                console.log(resource);
            }
        }

        ɵcompileComponent(DynamicComponent, { template, changeDetection: ChangeDetectionStrategy.OnPush });
        ɵrenderComponent(DynamicComponent, {
            host: containerRef.nativeElement,
            injector: this.injector,
            hostFeatures: [ɵLifecycleHooksFeature],
        });
    }

在调用this.createComponentFromRaw('<li>One</li>', this.ref.element);时，组件在以ng serve身份运行时会按预期呈现，但在生产模式(ng build --prod)下运行时会抛出以下错误：

ERROR Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.

Answer 1

看起来目前唯一可用的选项是在angular.json中设置buildOptimizer: false

这是因为buildOptimizer错误地认为@angular/编译器没有副作用，并将其作为树摇动的一部分删除