Angular 9 Ivy entryComponents 转换答案

【问题标题】：Angular 9 Ivy entryComponents conversionAngular 9 Ivy entryComponents 转换
【发布时间】：2020-03-20 02:36:01
【问题描述】：

@Component({
   selector: 'dynamic',
   template: '<ng-template *ngFor="let portal of portals" [cdkPortalOutlet]="portal"></ng-template>',
   // entryComponents before Ivy
   entryComponents: [Component1, Component2, Component3]
})
class DynamicComponent<T extends BaseComponentClass>() {
    portals: ComponentPortal<any>[] = [];

    constructor(@Inject(COMPONENTS_TOKEN) components: T[]) {
        // Something like this
        this.portals = components.map(c => new ComponentPortal(c));
    }
}

@NgModule({
    declarations: [
        DynamicComponent
        Component1,
        Component2,
        Component3,
    ],
    imports: [PortalModule, CommonModule, MyOtherModule]
})

我有一个类似上面的组件，我使用ComponentPortal 和cdkPortalOutlet 动态创建。 DynamicComponent 本身有许多它创建的插座和组件。以前使用entryComponents，我会列出可以加载到DynamicComponents 出口的每个组件。这按预期工作，但现在在升级到 Ivy 并删除不推荐使用的 entryComponents 后，这不再有效。我创建了DynamicComponent，它初始化得很好，但是DynamicComponent 内部的组件似乎没有被创建，并导致整个DynamicComponent 渲染失败。如果我删除DynamicComponent 中的插座，那么DynamicComponent 中的其他所有内容都会正常显示。

我的想法是 DynamicComponent 的依赖组件在创建时没有解析。依赖组件不用于任何其他角度组件。我是否遗漏了有关如何将旧的 entryComponent 行为转换为与 Ivy 一起使用的内容？

编辑： "buildOptimizer": false 修复了它，但理想情况下希望保持这种状态。

【问题讨论】：

标签： angular angular9 angular-ivy

【解决方案1】：

您可以在 DynamicComponent 类中创建一个 entryComponents 数组，在其中列出未在其他地方引用的组件，例如：

class DynamicComponent<T extends BaseComponentClass>() {
    entryComponents = [Component1, Component2, Component3];
    ...

组件被引用的事实将防止它们被摇树，即使该变量没有用于任何事情。在Angular GitHub issue 上查看有关此类问题和可能解决方案的有趣讨论。

【讨论】：