ng build --prod后导航异常：直接输入URL无法访问页面

这是Angular单页应用（SPA）部署时的经典问题，我来给你理清楚原因和解决办法：

问题根源 #

Angular的路由分为两种模式：

• Hash模式（默认）：URL带#，比如www.domain.tld/#/login，这种模式下服务器只会处理到#前面的部分，后面的路由由Angular客户端处理，所以不会有问题。
• HTML5模式（PathLocationStrategy）：URL不带#，比如www.domain.tld/login，这种模式更美观，但服务器不知道这些路由是Angular的客户端路由，会直接去服务器上找/login这个物理文件或接口，找不到就会返回404错误。

本地开发时Angular的ng serve已经自动处理了路由转发，但生产部署后需要手动配置服务器，让所有非API的请求都指向index.html，由Angular来处理路由。

解决方案 #

1. 先确认Angular路由配置

确保你在app-routing.module.ts里启用了HTML5模式：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  // 其他路由...
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })], // useHash设为false启用HTML5模式
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 配置服务器转发规则

根据你使用的服务器类型，选择对应的配置：

情况一：使用Apache服务器

在项目根目录（或服务器的网站根目录）创建.htaccess文件，添加以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

这段规则会让所有不是物理文件/目录的请求都转发到index.html。

情况二：使用Nginx服务器

修改Nginx的站点配置文件（通常在/etc/nginx/sites-available/下），在location /块中添加：

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

配置完成后重启Nginx：sudo systemctl restart nginx

情况三：使用Node.js/Express服务器（MEAN栈后端）

如果你的后端是Express，需要在Express的入口文件（比如server.js）中添加路由转发，确保所有非API的请求都返回index.html：

const express = require('express');
const path = require('path');
const app = express();

// 先处理API路由
app.use('/api', require('./routes/api'));

// 处理Angular静态文件
app.use(express.static(path.join(__dirname, 'dist/your-app-name')));

// 所有非API请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-app-name/index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server running on port ${port}`));

注意替换your-app-name为你的Angular项目名称（dist目录下的文件夹名）。

验证 #

配置完成后，重新部署Angular项目（ng build --prod），然后测试直接输入www.domain.tld/login，应该就能正常加载页面了。

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