在 Angular 中处理 F5 重新加载

Question

我的 Angular 项目有问题。在 dev (ng s) 中工作正常，按 F5 键后，页面重新加载正确并且工作正常。

当我构建项目并将其部署到远程服务器时，一切正常，但按 F5 按钮后，页面重新加载并显示错误 404 - 未找到。我做错了什么？

我的路由器模块：

const routes: Routes = [
  // hlavní cesty routingu
  { path: "login", component: LoginComponent },
  { path: "registration", component: RegisterComponent },
  { path: "resetPassword", component: ResetPasswordComponent },
  { path: "resetPasswordNew", component: InsertNewPasswordComponent },

  {path: "system",
  component: MainComponentComponent, 
  canActivate: [AuthGuard], // Auth guard mi vrací true nebo false podle toho, zda už mám načtený token nebo ne
  children: [ 
    { path: 'dashboard', component: DashboardComponent, canActivate: [RoleGuardService]},  //RoleGuardService mi hlídá, zda je lognutý žák nebo učitel
    { path: 'baterie'  , component: BaterieComponent},
    { path: 'settings' , component: SettingsComponent,
    children: [
      {path: 'info' , component: InfoComponent, canActivate: [RoleGuardService]}
    ]
    },
    { path: '', redirectTo: 'dashboard', pathMatch: 'full', },
  ]
  },

  { path: '', redirectTo: 'login', pathMatch: 'full', },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

谢谢！

Answer 1

您应该阅读Angular - Deployment documentation。

路由应用必须回退到index.html

Angular 应用程序是完美的 使用简单的静态 HTML 服务器提供服务的候选人。你不 需要一个服务器端引擎来动态组合应用程序页面 因为 Angular 在客户端执行此操作。

如果应用使用 Angular 路由器，您必须将服务器配置为 在被要求提供文件时返回应用程序的主机页面 (index.html) 它没有。

路由应用程序应支持“深层链接”。深层链接是 URL 指定应用程序内部组件的路径。例如， http://example.com/heroes/42 是英雄详情页面的深层链接 显示 id 为 42 的英雄。

当用户从一个 运行客户端。 Angular 路由器解释 URL 和路由到 那个页面和英雄。

但是点击电子邮件中的链接，在浏览器地址中输入 栏，或者只是在英雄详情页面上刷新浏览器—— 所有这些操作都由浏览器本身处理，在 运行应用程序。浏览器直接向服务器发出请求 对于该 URL，绕过路由器。

静态服务器在收到一个 请求http://example.com/。但它拒绝 http://example.com/heroes/42 并返回 404 - Not Found 错误 除非它被配置为返回 index.html。