Angular 9 Ivy entryComponents 转换

Question

@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]
})

I have a component something like above that I create dynamically using ComponentPortal and cdkPortalOutlet . The DynamicComponent itself has many outlets and components that it creates. Previously with entryComponents I would list every component that could be loaded into the DynamicComponents outlets. This was working as expected, but now after upgrading to Ivy and removing deprecated entryComponents , this no longer works. I create DynamicComponent and it initializes fine, but components inside of DynamicComponent don't seem to be created and cause the entire DynamicComponent to fail its render. If I remove the outlets in DynamicComponent then everything else in DynamicComponent renders fine.

My thoughts are that the dependency components of DynamicComponent are not resolved when creating it. The dependency components are not used in any other angular components. Am I missing something on how to convert old entryComponent behaviour to work with Ivy?

EDIT: "buildOptimizer": false fixes it but ideally want to keep this on.

Answer 1

You can create an entryComponents array in your DynamicComponent class where you list the components that are not referenced elsewhere, eg:

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

The fact that the components are referenced will prevent them from being tree shaken, even though the variable is not used for anything. See an interesting discussion about this kind of problem and possible solution at this Angular GitHub issue .