我正在尝试为Angular项目中的Dashboard-module设置延迟加载,遇到了一个错误:
'insight-dashboard'不是已知元素:
如果'insight-dashboard'是一个Angular组件,那么验证它是该模块的一部分。如果'insight-dashboard'是一个Web组件,那么将'CUSTOM_ELEMENTS_SCHEMA'添加到该组件的'@ NgModular.schemas'中以抑制此消息。
insight-dashboard在dashboard.component.ts中看起来像这样:
@Component({
selector: 'insight-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
据我所知,DashboardModule的一些部分正在其他组件中使用(如MainWrapperComponent,SideNavLeftComponent),并且由于延迟加载而无法识别。这些组件(MainWrapperComponent或SideNavLeftComponent)需要在AppModule中声明,因为它们不仅为 Jmeter 板提供常规功能,而且必须在整个应用程序中可用。
下面是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-project中实现Lazy Loading是否真的很复杂。
1条答案
按热度按时间smdncfj31#
为了准备延迟加载
DashboardModule
,您需要确保其所有组件仅由该模块使用。因此,如果MainWrapperComponent
中使用了insight-dashboard
,则应该从DashboardModule
中提取它并全局声明它。考虑使用共享模块(https://angular.io/guide/sharing-ngmodules)。一旦完成了这样的重构--将DashboardModule
转换为延迟加载模块并不复杂。