错误：“insight-dashboard-erneuerung-settings”在实现延迟加载时不是已知元素

Question

我正在尝试在 Angular 项目中为仪表板模块设置延迟加载，但遇到错误：

“insight-dashboard”不是已知元素：

如果“insight-dashboard”是 Angular 组件，则验证它是否是该模块的一部分。 如果“insight-dashboard”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。

‘insight-dashboard’在dashboard.component.ts中看起来像这样：

@Component({
  selector: 'insight-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})

据我了解，DashboardModule 中的某些部分正在其他组件（如 MainWrapperComponent、SideNavLeftComponent）中使用，并且由于延迟加载而无法识别。这些组件（MainWrapperComponent 或 SideNavLeftComponent）需要在 AppModule 中声明，因为它们不仅为仪表板提供通用功能，而且必须在整个应用程序中可用。

这是 MainWrapperComponent.component.html 中的部分：

<ng-container *ngIf="actView==='dashboard'">

  <insight-dashboard>

    <div class="ev-toolbar-theme-container">
      <button mat-icon-button matTooltip="Optionen" (click)="openRightSidenav('dashboard-options')">
        <mat-icon>settings</mat-icon>
      </button>
    </div>

  </insight-dashboard>
</ng-container>

组件之间有很多依赖关系，但我想知道，在这个 Angular 项目中实现延迟加载是否真的很复杂。

Answer 1

为了准备

DashboardModule

进行延迟加载，您需要确保其所有组件仅由该模块使用。因此，如果

insight-dashboard

用于

MainWrapperComponent

中，您应该从

DashboardModule

中提取它并在全局范围内声明它。考虑使用共享模块（https://angular.io/guide/sharing-ngmodules）。一旦完成这样的重构 - 将您的

DashboardModule

变成延迟加载的模块并不复杂。