带有 Matdialog 的 Angular 14 独立组件：ReferenceError：在初始化之前无法访问“x”

Question

目前我正在使用 Angular 14。在升级过程中，独立组件与 Matdialog 有问题并遇到此问题：

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

追根溯源后。 我看到该组件在使用 MatDialog 时出现错误，并且无法访问试图打开的组件。

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

Answer 1

Angular 14 引入了独立组件。 重构所有这些并遇到相同的问题。

尝试将其导入imports:[]数组但仍然无法正常工作。 解决方法是lazyload它来解决问题。

  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%',
    });
  }