我正在运行Angular CLI 6.0.2并尝试Lazy Module为某些组件使用负载。
我已经按照文档并配置了我app.module的如下：
const appRoutes: Routes = [
{
path : '',
component: LoginComponent
},
{
path : 'main',
component: FuseMainComponent,
canActivate: [AuthguardService]
},
{
path : 'appqos',
component: AppqosComponent,
canActivate: [AuthguardService]
},
{
path : 'tasks',
// component: TaskviewerComponent,
// canActivate: [AuthguardService]
loadChildren: './taskviewer/taskviewer.module#TaskviewerModule'
imports: [
...,
RouterModule.forRoot(appRoutes)
]
的lazy module负载被设定为如下：
const routes: Routes = [
{
path: 'tasks',
component: TaskviewerComponent
}
];
@NgModule({
imports: [
CommonModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatSortModule,
MatChipsModule,
MatCheckboxModule,
MatSelectModule,
NgxDatatableModule,
MatButtonModule,
MatTooltipModule,
RouterModule.forChild(routes)
],
declarations: [TaskviewerComponent],
exports: [
TaskviewerComponent, RouterModule
]
})
export class TaskviewerModule { }
当我浏览到“任务”路线时，组件显示为空白页。我在控制台中没有看到任何错误。在网络选项卡中，它只是显示它正在加载文件taskviewer-taskviewer-module-ngfactory.js而不是chunk.js
我尝试了不同的教程和官方文档以及使用，ng serve --aot但产生了相同的结果。
有什么方法可以查看组件未正确呈现并返回空白页的原因吗？
TaskviewerComponent 的 url 是localhost:4200/tasks/tasks. 如果你想localhost:4200/tasks在子路由中定义：
const routes: Routes = [
{
path: '', // <-- no name path here
component: TaskviewerComponent
}
];
查看https://angular.io/guide/router#lazy-loading-route-configuration in app-routing.module.ts和危机中心路由.module.ts了解如何为延迟加载模块设置默认路由.
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句