Angular生产环境路由访问返回404错误该如何调整配置？

Angular默认使用HTML5的PathLocationStrategy路由模式（不带#的干净路径），本地开发时ng serve启动的内置服务器默认配置了所有请求回退到index.html的规则，所以子路由可以正常访问。而生产环境的web服务器没有对应配置的话，会将http://my-app/test当成静态资源路径去查找，找不到对应文件就返回404错误。

方案一：配置生产服务器URL重写（推荐） #

无需修改Angular项目代码，路径保持美观无#号，只需要在部署的web服务器上添加回退规则，把所有非静态资源的请求都重定向到index.html，由Angular路由接管路径匹配。
常见服务器配置示例：

• Nginx配置：在server块中添加如下规则

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

• Apache配置：在项目根目录的.htaccess文件中添加

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

• Tomcat配置：在webapp的WEB-INF/web.xml中添加错误页配置

<error-page>
  <error-code>404</error-code>
  <location>/index.html</location>
</error-page>

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

如果没有权限修改生产服务器配置，可以直接修改Angular路由配置，启用HashLocationStrategy模式，路由会自动带#号，比如路径会变成http://my-app/#/test，所有路径都是在index.html下的锚点，不会触发服务器的资源查找。
修改AppRoutingModule的imports配置即可：

imports: [RouterModule.forRoot(routes, { useHash: true })],

如果你的Angular应用不是部署在域名根目录，而是子目录（比如http://my-app/xxx/），还需要修改index.html中的<base href="/" />为对应子目录路径，比如<base href="/xxx/" />。

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