Angular 12如何使用href跳转页面并解决直接访问的404报错？

Angular 作为单页应用默认采用 HTML5 History 模式 实现前端路由，所有路由匹配逻辑都在客户端入口文件index.html加载完成后执行。
直接访问/page1这类子路径时，浏览器会先向服务端发起对应路径的静态资源请求，由于服务端不存在与/page1匹配的静态文件，首次请求会返回404状态码；如果你已经配置了服务端 fallback 规则将所有请求重定向回index.html，Angular 加载完成后会在客户端匹配路由渲染对应页面，所以最终页面功能正常，但最初的404请求记录会保留在控制台。

• 方案1：调整服务端重定向规则（推荐）
  将原服务端的404 fallback 规则改为：匹配不到静态资源时，以200状态码返回index.html内容，避免触发404报错。
  以Nginx为例，配置参考：

  server {
    listen 80;
    server_name example.com;
    root /path/to/your/angular/dist;
  
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
  

  Apache、Caddy、Node.js 等服务端都有对应的类似配置，统一修改为返回200状态码的index.html即可。

• 方案2：切换Angular路由为Hash模式
  如果无法修改服务端配置，可以将Angular路由改为Hash模式，修改app-routing.module.ts配置：

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  const routes: Routes = [
    // 你原有路由配置
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

  改完后访问路径会变为https://example.com/#/page1，浏览器只会请求#之前的根路径资源，不会发起/page1的单独请求，自然不会触发404报错。

内容的提问来源于stack exchange，提问作者Bal Sankar