Angular 14 standalone component with Matdialog: ReferenceError: Cannot access 'x' before initialization on

Question

Currently I'm working on Angular 14. on the upgrade process, the standalone component have problem with Matdialog and getting this issue:

jsonp chunk loading:77 ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'RdAuthorListFollowersOrgan' before initialization
ReferenceError: Cannot access 'RdAuthorListFollowersOrgan' before initialization

after tracking the root of problem. I see that component have error is using MatDialog and cannot access on the component trying to open.

  async openDiaLogFollowers(event: any) {
    this.matDialog.open(RdAuthorPopupListFollowersMbTemplate, {
      maxWidth: '100vw',
      maxHeight: '100vh',
      width: '100%',
      height: '100%',
    });
  }

Answer 1

Angular 14 introduce standalone component. Refactor all of them and having the same problem.

Try to import it in imports:[] array but still not working. The solution is lazyload it to solve the problem.

  async openDiaLogFollowers(event: any) {
    const { RdAuthorPopupListFollowersMbTemplate } = await import(
      '../../templates/rd-author-popup-list-followers-mb/rd-author-popup-list-followers-mb.template'
    );
    this.matDialog.open(RdAuthorPopupListFollowersMbTemplate, {
      maxWidth: '100vw',
      maxHeight: '100vh',
      width: '100%',
      height: '100%',
    });
  }