Angular 6延迟加载路线 [英] Angular 6 Lazy loading route
问题描述
我想在我的项目中为管理员添加延迟加载的路由。我使用的是ASP Net Core后端和Angular 6前端,因此我的编译代码输出目录为:wwwRoot / Angular / dist。当我编译项目时,我看到文件 admin-admin-module-ngfactory.js存在在那里,但是当我尝试输入页面'/ admin / dash'时,它会抛出错误:
I wanted to add lazy loaded route for admin in my project. I'm using ASP Net Core backend and Angular 6 frontend, so my output dir for compile code is: wwwRoot/Angular/dist. When I compiled project, I see that file "admin-admin-module-ngfactory.js exists there, but when I try to enter page '/admin/dash', it throw error:
Failed to load resource: the server responded with a status of 404 (Not Found)
Error: Uncaught (in promise): Error: Loading chunk admin-admin-module-ngfactory failed.
(error: http://localhost:5000/admin-admin-module-ngfactory.js)
Error: Loading chunk admin-admin-module-ngfactory failed.
(error: http://localhost:5000/admin-admin-module-ngfactory.js)
这是我的路由模块:
admin-routing.module.ts:
admin-routing.module.ts:
const routes: Routes = [
{ path: 'dash', component: AdminDashboardComponent, pathMatch: 'full'}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule],
declarations: []
})
export class AdminRoutingModule { }
和app-routing.module.ts:
and app-routing.module.ts:
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'error', component: ErrorComponent },
{ path: 'admin', loadChildren: './admin/admin.module#AdminModule' },
{ path: '', pathMatch: 'full', redirectTo: 'dashboard' },
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [RouterModule]
})
export class AppRoutingModule { }
更新:
如果我运行使用dotnet run的项目(使用ng build --aot)无法正常工作,但如果我仅使用ng serve --aot来启动Angular应用程序,则可以使用。
If I run project with dotnet run (with ng build --aot) it doesn't work, but if I launch only Angular app with ng serve --aot it works.
推荐答案
在.angular-cli.json文件中添加以下行。
Add below line in .angular-cli.json file.
"apps": [
{
"deployUrl": "Angular-Build-Path/",
谢谢。
这篇关于Angular 6延迟加载路线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!