Angular应用刷新非空白路由报错，直接访问路由提示Cannot GET的解决方法

问题原因 #

Angular是单页应用（SPA），默认使用HTML5 History模式的客户端路由。当直接访问example.com/movie或刷新页面时，浏览器会向服务器发起对应路径的GET请求，但服务器上不存在/movie这个物理文件，因此返回Cannot GET /xxx错误。

解决方案 #

1. 开发环境（Angular CLI Dev Server）

让开发服务器将所有路由请求转发到index.html：

• 临时生效：使用命令行启动

  ng serve --history-api-fallback
  

• 永久生效：修改angular.json配置
  找到projects -> [你的项目名] -> architect -> serve -> options，添加：

  "historyApiFallback": true
  

2. 生产环境（服务器配置）

根据服务器类型，添加规则将非文件请求指向index.html：

Nginx

修改站点配置文件，在location /块中添加指令：

server {
  listen 80;
  server_name example.com;
  root /path/to/your/angular/dist;

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

Apache

在项目根目录创建.htaccess文件（需开启mod_rewrite模块）：

RewriteEngine On
RewriteBase /
# 忽略已存在的文件或目录
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 重写所有请求到index.html
RewriteRule ^(.*)$ index.html [L]

3. 备选方案：使用Hash路由

如果无法修改服务器配置，可切换到Hash模式，路由URL会带上#（如example.com/#/movie），此时浏览器不会向服务器请求对应路径：
修改AppRoutingModule的路由配置：

const routes: Routes = [
  {path: 'movie', component: movieComponent },
  {path: 'home', component: homeComponent },
  { path: '', redirectTo: '/movie', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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