在Angular中处理F5重装

Question

我的Angular项目出现了问题。在开发中（ng s）工作正常，按F5键后，页面正确重载，工作正常。

当我建立并部署项目到远程服务器时，一切正常，但按下F5键后，页面重新加载并显示错误404 - not found。我到底做错了什么？

我的路由器模块。

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 - 部署文档.

被路由的应用程序必须回退到 index.html

Angular应用是使用简单的静态HTML服务器进行服务的最佳人选。你不需要服务器端的引擎来动态编译应用页面，因为Angular在客户端完成了这些工作。

如果应用程序使用 Angular 路由器，您必须配置服务器，以便在询问应用程序没有的文件时返回应用程序的主机页面（index.html）。

路由器应用程序应该支持 "深度链接"。深度链接是一个URL，它指定了一个通往应用程序内部组件的路径。比如说 http://example.com/heroes/42 是一个指向英雄详情页的深层链接，显示ID为：42的英雄。

当用户从正在运行的客户端内导航到该URL时，没有任何问题。Angular路由器会对该URL进行解释，并路由到该页面和英雄。

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

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