Angular 7路由刷新/直接访问页面出现404错误求助

这个问题太常见啦！本质原因是Angular属于单页应用(SPA)，咱们写的路由都是前端路由：通过菜单按钮跳转时，是Angular在浏览器内部处理路由跳转，不会向服务器发送新的请求；但刷新页面或者直接在地址栏输入路由地址时，浏览器会直接向服务器请求/myforms/home这个路径，而服务器上根本不存在这个物理文件，自然就返回404了。

下面给你几个实用的解决办法，按需选择：

方法一：改用Hash路由（最简单，无需服务器配置） #

这种方案会在URL中添加#，比如变成localhost:8091/myforms/#/home。浏览器刷新时只会请求/myforms/根路径，剩下的路由部分由Angular自己处理，完美避开服务器的路径检查。

配置步骤：

1. 打开你的app-routing.module.ts文件
2. 导入路由相关的策略类：

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

3. 在@NgModule的providers数组中添加配置：

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]
})
export class AppRoutingModule { }

改完之后，刷新或者直接输入带#的URL就能正常访问了。唯一的小缺点是URL多了个#，但胜在零服务器配置，快速见效。

方法二：配置服务器支持HTML5路由（推荐生产环境使用） #

如果不想URL里有#，就需要让服务器把所有路由请求都转发到Angular的入口文件index.html。这样不管用户访问哪个路由，服务器都返回index.html，再由Angular来处理具体的路由逻辑。

如果你用Apache服务器 #

在项目的myforms目录下创建.htaccess文件，内容如下：

RewriteEngine On
# 如果请求的是真实存在的文件/目录，直接返回
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# 否则转发到index.html
RewriteRule ^ /myforms/index.html

注意把/myforms/替换成你实际的base路径。

如果你用Nginx服务器 #

修改Nginx配置文件的server块，添加以下规则：

location /myforms/ {
  try_files $uri $uri/ /myforms/index.html;
}

这条规则会让Nginx先尝试匹配真实的文件/目录，找不到就返回index.html。

如果你用开发环境的ng serve #

Angular开发服务器默认支持HTML5路由，但因为你设置了base href="/myforms/"，启动时需要指定对应参数：

ng serve --base-href /myforms/ --port 8091

这样开发环境下刷新页面也不会出现404了。

小提醒：检查路由链接拼写 #

你的代码里写的是router-link-Active="active"，注意这个属性的正确拼写是驼峰式的routerLinkActive="active"，虽然这不会导致刷新404，但会影响菜单激活状态的样式，顺手改一下更规范。

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