Angular 6延迟加载路线答案

【问题标题】：Angular 6 Lazy loading routeAngular 6延迟加载路线
【发布时间】：2018-12-11 16:01:56
【问题描述】：

我想在我的项目中为管理员添加延迟加载的路由。我正在使用 ASP Net Core 后端和 Angular 6 前端，所以我的编译代码输出目录是：wwwRoot/Angular/dist。当我编译项目时，我看到那里存在文件“admin-admin-module-ngfactory.js，但是当我尝试进入页面'/admin/dash'时，它会抛出错误：

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:

const routes: Routes = [ 
  { path: 'dash', component: AdminDashboardComponent, pathMatch: 'full'}
];


@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule],
  declarations: []
})
export class AdminRoutingModule { }

和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 应用程序，它会起作用。

【问题讨论】：

仔细检查路径
我已经检查了路径，我确定这是正确的。

标签： angular routing

【解决方案1】：

在 .angular-cli.json 文件中添加以下行。

"apps": [
{
  "deployUrl": "Angular-Build-Path/",

谢谢。

【讨论】：

我添加了：“deployUrl”：“/Angular/dist/”，它有效！非常感谢。
您能否在这里提供您对代码所做的更改，这样其他人会更容易联系起来。

【解决方案2】：

根据 Angular 的部署文档：

如果您将文件复制到服务器子文件夹中，请附加构建标志， --base-href 并适当设置。

因此，您应该在 .angular-cli.json 文件中使用 --base-href 参数。

或者，您可以在没有-base-href 配置（在 angular-cli- 文件中）的情况下在开发模式下工作，并且只在应用程序生产构建时设置它。

ng build --base-href=/Angular/dist/

参考资料：

https://angular.io/guide/deployment#simplest-deployment-possible

https://angular.io/guide/deployment#the-base-tag

【讨论】：