Question

我在MEAN堆栈应用程序上路由时遇到问题。我通过Angular开发服务器测试站点时使用路由工作（使用ng serve然后在localhost：4200查看）。但是，当我尝试仅使用我为后端构建的Express服务器时，我遇到了一些问题。问题是虽然网站运行良好，即使路由到运行ng build后提供的所有静态页面，当从地址栏重新加载或导航到页面而不是页面上的链接时，我遇到了用

“无法获取”错误。

路由在Angular生成的文件夹中的app.module.ts文件中定义。它看起来像这样：

const appRoutes: Routes = [
  {path: '', component: HomeComponent, canActivate: [AuthGuard]}, // accessible to all
  {path: 'register', component: RegisterComponent, canActivate: [AuthGuard]}, // accessible to all
  {path: 'login', component: LoginComponent, canActivate: [AuthGuard]}, // accessible to all
  {path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard, UserAuthGuard]}, // only accessible by users
  {path: 'ridequeue', component: RidequeueComponent, canActivate: [AuthGuard, VolunteerAuthGuard]}, // Volunteers and Administrators only
  {path: 'viewusers', component: ViewusersComponent, canActivate: [AuthGuard, VolunteerAuthGuard]}, // Volunteers and Administrators only
  {path: 'manageusers', component: ManageusersComponent, canActivate: [AuthGuard, AdministratorAuthGuard]}, // Administrators only
  {path: 'adminpanel', component: AdminpanelComponent, canActivate: [AuthGuard, AdministratorAuthGuard]}, // Administrators only
  {path: 'profile', component: ProfileComponent, canActivate: [AuthGuard, UserAuthGuard]}, // only accessible by users
  {path: 'feedback', component: FeedbackComponent, canActivate: [AuthGuard, UserAuthGuard]}, // only accessible by users
  {path: 'unauthorized', component: UnauthorizedComponent, canActivate: [AuthGuard]} // accessible to all
];

它在导入列表中使用RouterModule.forRoot(appRoutes)在此文件中实现。

至于Express应用程序中的路由，我有为访问的不同API配置的路由，以及指导静态站点的位置（通过Angular创建的前端，我有：

app.use(express.static(path.join(__dirname, 'public')));

其他可能相关的信息：我正在使用Express 4.16和CORS中间件，Angular 6和Chrome进行测试。

如何解决？

Answer 1

此问题的解决方法是向我的Express应用添加中间件以确保启用了回退 - 在没有要投放的文件时导航到index.html。我最终尝试了express-history-api-fallback和connect-history-api-fallback。经过一些配置后，两者都解决了问题，但我坚持使用Express，因为它专为Express而构建。

重新加载返回无法在MEAN堆栈上获取错误（Angular 6，Express）

1 个答案: