javascriptangulardeferred-loadingangular17

Deferrable Views not working when used in library repo


We are trying to implement deferrable views for a component in angular. This component is present in a component which is used by a parent in another repo. While defer seems to be working when we implemented it inside component of the same project, its not working when imported and used in a library. Two issue here actually:

  1. code is not split into a new bundle but loaded along with the main library bundle
  2. placeholder element appears for a split second and then the view disappears. on checking the html i found that I cannot see the child elements of the deferred component, its just like a dummy element enter image description here

Here are the things which I have followed as a requirement:

  1. Using angular 17 in both the main project and library project
  2. Using on viewport condition to defer the block
  3. the component inside the defer block is a standalone component
  4. component is not used anywhere outside the defer block and also not referenced using viewchild

Is there anything I'm doing wrong or any additional requirement I need to follow ?


Solution

  • I had raised this issue to Angular team https://github.com/angular/angular/issues/53936. Turns out angular hadn't added support for deferrable views in libraries in v17. And since libraries are compiled differently than applications. It was not working. It has been added now and will be available in Angular v18 https://github.com/angular/angular/issues/53936#issuecomment-2019427618 .