404 GitHub 页面上的 Angular 路由错误

Question

我有一个托管在 GitHub 页面中的 Angular 应用程序。我最近实现了路由，所以我的应用程序有多个页面。我按照路由文档来实现我的

app-routing.module.ts

文件（如下所示）。

const routes: Routes = [
  {
    path: 'research',
    component: ResearchPageComponent
  },
  {
    path: 'publications',
    component: PublicationsPageComponent
  },
  // ... more here ...
  {
    path: '',
    component: HomePageComponent
  }
];

路由在我的

localhost://

上完美地按照预期工作。然而，当我将应用程序发布到 GitHub 页面时，路由中断：

• 单击主页上的菜单链接：完美运行。
• 尝试通过 URL 直接导航至主页：完美运行。
• 刷新主页：完美运行。
• 尝试通过 URL 直接导航到任何其他页面：404 错误。
• 尝试刷新任何其他页面（单击菜单链接后）：404 错误。

发生什么事了？为什么应用程序在本地可以按预期运行，但有时只能在 GitHub 页面上运行？

我看到了这个问题，但我已经确认我的相关链接是正确的。我还看到了切换到哈希路由策略的建议，例如这个问题的答案，但我想继续使用 url 路由，因为我的 url 需要简短且易于记忆（这是个人网站/简历/作品集） ).

Answer 1

答案

可以在这个问题下找到简洁的答案。事实证明，这是 Angular 中的路由操作顺序的技术问题。官方文档在“部署到GitHub页面”下对此问题有答案，但解释得很差。太长了；你需要创建一个 404 错误页面（并将其命名为

404.html

），它是应用程序的 compiled 根页面的精确副本，然后将其放入编译 Angular 的输出文件夹中（例如

/docs

）应用程序。不要将其放在您编译的源代码文件夹中； Angular 编译器不会提供此技巧发挥作用所需的输出。

其他 Web 托管服务有更优雅的解决方法，但您没有它们的 GitHub 页面所需的访问权限。

解释

现在，如果您对原因的解释感兴趣：

本质上，Angular 路由器位于 Angular 应用程序的根目录中；它会在 Angular 应用程序启动后引导运行。您的 Angular 应用程序本身位于您网站的根页面上。

通常，当您请求 url 时，服务器会向您提供在您请求的 url 处找到的页面。然而，Angular 是“单页”的；您定义的路由实际存在的其他“页面”都不存在。 Angular 只是动态交换 Angular 应用程序中的内容，以提供其他“页面”的外观。您在 Angular 路由器上设置的“路由”只是映射哪些内容要交换哪些 url 由 Angular 路由器接收。最后一部分是关键——它引导我们解决操作顺序问题。

当然，您的 Angular 应用程序位于服务器上。当您请求应用程序的根页面时，服务器会将其返回给您。然后，当您收到该根页面时，Angular 应用程序和 Angular 路由器就会启动。好吧，要处理任何这些路由，您的 Angular 路由器需要已经启动。首先进入主页，然后点击其他页面的链接，是因为您从服务器请求应用程序的根页面，它返回根页面，然后您的 Angular 路由器启动，before您尝试导航通过点击链接。启动后，Angular 路由器可以拦截导航请求并根据您定义的路线交换内容。

但是，当您尝试从服务器请求任何这些路由网址（包括刷新）时，服务器看不到任何其他页面（因为这些页面实际上并不存在），因此它返回 404 错误。即使您已经加载了正确的“页面”，刷新也会从服务器请求该页面并覆盖您当前加载的内容。您的根页面永远不会返回，因此 Angular 路由器从未启动，因此导航尝试失败。

这就是解决方案的用武之地。您无法更改其工作方式，但您基本上可以欺骗服务器以确保您的 Angular 路由器无论如何都能启动。通过将主页复制为 404 错误页面，您正在制作另一个真实页面供服务器返回；每当出现 404 错误时服务器返回的页面。您请求的任何路由现在都将返回您的主页（Angular 应用程序的根目录 - 无论是返回实际主页，还是返回与主页重复的 404 错误页面）。这可以保证您的 Angular 路由器启动 - 现在您可以继续单击链接，就好像它一直是一整套网页一样！