Angular 中的页面重新加载或路由问题[已关闭]

Question

我正在用 Angular 构建我的个人网站并将其托管在 GitHub 页面上。当页面重新加载时，我遇到一个问题，并且显示 404 错误。对于主页来说，它工作正常，但除此之外它不起作用。 Safari 浏览器的每个页面也会出现此问题。

Answer 1

要解决此问题，您需要将 Angular 应用程序配置为使用基于哈希的路由，而不是默认的 HTML5 推送状态路由。基于哈希的路由在 URL 中使用哈希符号 (#)，这使得客户端路由器即使在重新加载页面时也能正确处理路由。

以下是如何在 Angular 应用程序中启用基于哈希的路由：

打开 Angular 应用程序的主模块文件，通常名为

app.module.ts

。

从

@angular/common

导入HashLocationStrategy和LocationStrategy。

在

@NgModule

元数据中，将

LocationStrategy

提供为

HashLocationStrategy

:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

保存更改并使用 Angular CLI 重建 Angular 应用程序：

ng build --prod

构建完成后，像往常一样将您的应用程序部署到 GitHub Pages。 现在，当您重新加载页面或直接访问特定 URL 时，基于哈希的路由应该正确处理导航，并且您不应再遇到 404 错误。

请记住将您的更改推送到 GitHub，您的网站应该在 Safari 和其他浏览器中按预期工作。