Angular路由异常：仅空路径生效，手动输入路由自动重定向

我配置了如下Angular路由：

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {NotfoundComponent} from "../shared/components/notfound/notfound.component";
import {IssuesComponent} from "../business/pages/issues/issues.component";
import {AddToInventoryComponent} from "../business/pages/add-to-inventory/add-to-inventory.component";
import {BoxTransferComponent} from "../business/pages/box-transfer/box-transfer.component";

const routes : Routes = [
    {
        path: '',
        component: IssuesComponent,
        data: {title: 'App - Issues'}
    },
    {
        path: 'add',
        component: AddToInventoryComponent,
        data: {title: 'App - Add To Inventory'}
    },
    {
        path: 'boxtransfer',
        component: BoxTransferComponent,
        data: {title: 'App - Transfer Inventory'}
    },
    {
        path: 'notfound',
        component: NotfoundComponent,
        data: {title: 'App - Page Not Found'}
    },
]


@NgModule({
    declarations: [],
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRouteModule {
}

目前仅path为''的根路由可正常加载，手动输入localhost:4200/add等子路由时，页面会自动重定向至localhost:4200；但通过HTML中<a routerLink="/add">跳转则可正常访问对应路径。请问该问题的原因是什么？

核心原因 #

Angular默认使用HTML5路由模式（PathLocationStrategy），这种模式下前端路由路径和普通URL格式一致，但直接在浏览器地址栏输入子路由时，浏览器会向服务器发送真实HTTP请求，索要/add对应的资源。而你的服务器未配置该路径的响应规则，因此会返回404或直接重定向到根目录（取决于服务器默认配置）。

而通过<a routerLink="/add">跳转时，Angular路由会拦截点击事件，不会向服务器发起请求，仅在前端修改URL并加载对应组件，因此能正常访问。

解决方案 #

1. 开发环境快速处理 #

使用Angular CLI开发服务器时，启动命令添加--history-api-fallback参数，让服务器把所有未匹配到的请求转发到index.html，交由前端路由处理：

ng serve --history-api-fallback

2. 生产环境服务器配置 #

需根据服务器类型配置规则，让所有非静态资源的请求指向index.html：

• Nginx：在配置文件中添加：

  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]
  

3. 备选方案：使用Hash模式（不推荐） #

若不想配置服务器，可切换到Hash路由模式，URL会变为localhost:4200/#/add，这种模式下所有路由请求不会发送到服务器：
修改路由模块的forRoot配置：

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

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