部署单页应用 Angular: 404 Not Found nginx - Shell-Bash

问题描述

在部署 Angular 单页应用时，可能会遇到 404 Not Found nginx 错误。这个错误通常出现在访问 Angular 应用的某些路由时。

问题原因

这个错误的原因通常是由于 nginx 服务器没有正确配置或者没有正确处理 Angular 应用的路由。

Angular 应用是一个单页应用，它的所有路由都是通过 Angular 路由器来管理的。当用户访问一个 Angular 应用的路由时，nginx 服务器需要正确处理这个请求，让 Angular 路由器来处理这个路由。

如果 nginx 服务器没有正确配置或者没有正确处理 Angular 应用的路由，就会导致在访问某些路由时出现 404 Not Found 错误。

解决方案

要解决这个问题，需要对 nginx 服务器进行正确的配置，让它能够正确处理 Angular 应用的路由。

以下是一些常见的解决方案：

1. 配置 nginx 服务器

在 nginx 服务器的配置文件中添加以下代码：

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

这个配置会让 nginx 服务器在处理路由时，将除了 /api 以外的所有路由都重定向到 index.html 文件中。这样就可以让 Angular 路由器来处理这个路由了。

2. 开启 HTML 5 模式

在 Angular 应用的根模块中开启 HTML 5 模式：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { LocationStrategy, PathLocationStrategy } from '@angular/common';

const routes: Routes = [
  // ...
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes, { useHash: false })
  ],
  providers: [
    { provide: LocationStrategy, useClass: PathLocationStrategy }
  ],
  // ...
})
export class AppModule { }

这个配置会让 Angular 路由器使用 HTML 5 模式来处理路由。这样就可以让 nginx 服务器直接处理这个路由了。

3. 修改 nginx 配置文件

在 nginx 配置文件中添加以下代码：

server {
    # ...
    location / {
       # ...
       # 返回 index.html 文件
       try_files $uri $uri/ /index.html;
    }
}

这个配置会让 nginx 服务器在处理路由时，将所有路由都重定向到 index.html 文件中。这样就可以让 Angular 路由器来处理这个路由了。

总结

通过以上三种方式可以解决 Angular 应用部署时遇到的 404 Not Found nginx 错误。需要注意的是，在处理路由时要让 nginx 服务器正确配置，并让 Angular 路由器来处理路由。