Search code examples
angulardeferred-loading

Do deferrable views only work inside standalone components?

I'm trying out deferrable views and have this code in the component of a normal (NgModule-based) component.

@defer (on interaction) {
    <app-defer></app-defer>
}@placeholder {
    <p>click to load</p>
}

The DeferComponent in the @defer block is standalone, but it is included in the initial bundle. The placeholder is shown until it is clicked, but no new content is loaded in after that. However, when I make the parent component standalone, the @defer block works as expected and the DeferComponent is not loaded in until the placeholder is clicked.

Is this expected? I'm confused about this because the documentation from Angular seems to indicate that only the components in the @defer block should be standalone in order for this to work .

Solution

  • As of v17.2, yes deferrable views are only supported on standalone components.

    The Angular team is looking to add support for non-standalone components in v18. So wait & see.