Angular 5项目部署后路由无法访问的问题求助

嘿，这个问题我太熟了！你碰到的是Angular单页应用（SPA）部署时的经典路由问题，我来给你拆解原因和解决办法：

Angular是单页应用，所有路由逻辑都是在前端浏览器里处理的。本地用ng serve的时候，Angular自带的开发服务器已经帮你配置好了——不管访问哪个路由，只要对应的文件不存在，就自动 fallback 到index.html，让Angular自己去解析路由。

但部署到生产服务器（比如Nginx、Apache这些）的时候，服务器不知道这个逻辑：当你访问/user/profile这种路由时，服务器会去硬盘上找对应路径的文件或文件夹，而你的dist目录里只有index.html和静态资源，自然返回404错误。

根据你用的服务器类型，有几种常用的解决方案：

方案1：配置服务器，让所有路由请求 fallback 到index.html #

这是最推荐的方案，URL看起来更干净，也符合现代SPA的习惯。

如果你用Nginx #

找到你的Nginx站点配置文件（通常在/etc/nginx/conf.d/或者/etc/nginx/sites-available/目录下），修改location /块的内容：

location / {
  # 先尝试访问请求的文件、目录，都不存在的话就返回index.html
  try_files $uri $uri/ /index.html;
}

修改完后重启Nginx生效：sudo systemctl restart nginx

如果你用Apache #

在你的dist目录下创建一个.htaccess文件，内容如下：

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

另外要确保你的Apache配置里开启了rewrite模块，并且允许.htaccess生效（在虚拟主机配置里设置AllowOverride All），然后重启Apache。

如果你用IIS #

1. 先安装IIS的URL Rewrite模块（如果没装的话）
2. 在dist目录下创建web.config文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

方案2：改用Hash路由（无需修改服务器配置） #

如果暂时没法改服务器配置，可以让Angular用Hash模式的路由，URL会带上#（比如http://yourdomain/#/user/profile）。服务器只会处理#前面的部分，后面的路由由Angular自己解析，不会出现404。

修改步骤：

1. 打开src/app/app.module.ts
2. 导入HashLocationStrategy和LocationStrategy：

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

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

@NgModule({
  // ...其他模块、组件配置
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
})
export class AppModule { }

4. 重新执行ng build -prod构建，然后上传新的dist文件夹即可。

• 先看服务器的访问日志，确认请求的路径确实返回了404，排除其他配置问题
• 检查服务器配置是否正确应用：比如Nginx配置有没有重启，Apache的rewrite模块是否启用，.htaccess是否被允许生效
• 可以先手动访问http://yourdomain/index.html，然后在页面里点击路由链接，看是否能正常跳转，排除Angular路由本身的问题

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