Angular应用部署到子目录时的路由配置异常问题

看起来你遇到的是Angular单页应用部署在子目录/myapp时的路由URL异常问题，结合你的描述，我整理了几个关键的排查和解决步骤：

1. 确认构建命令的base href配置 #

你用的ng build -bh /myapp方向是对的，但建议加上末尾的斜杠，确保base href完全符合路径规范：

ng build --base-href "/myapp/"

构建完成后，打开dist目录下的index.html，检查是否存在<base href="/myapp/">标签——这个标签是Angular正确解析资源和路由路径的核心，缺失或错误都会导致URL或资源加载异常。

2. 检查路由配置的默认路由 #

你的默认路由应该是指向ConfigureComponent，确保路由配置没有语法错误，比如：

import { Routes, RouterModule } from '@angular/router';
import { ConfigureComponent } from './configure/configure.component';

const routes: Routes = [
  { path: '', component: ConfigureComponent }, // 默认路由匹配根路径
  // 其他路由规则...
];

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

如果默认路由是用redirectTo，也要确保目标路径正确：

{ path: '', redirectTo: 'configure', pathMatch: 'full' },
{ path: 'configure', component: ConfigureComponent }

3. 配置服务器重写规则（针对HTML5路由模式） #

如果你用的是Angular默认的PathLocationStrategy（不带#的HTML5路由），服务器必须配置重写规则，否则所有路由请求都会被服务器当作静态文件请求处理，导致URL解析异常。

Apache服务器 #

在foobar.com/myapp目录下创建.htaccess文件，添加以下内容：

RewriteEngine On
# 排除实际存在的文件或目录
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 将所有请求重写到myapp下的index.html
RewriteRule ^(.*)$ /myapp/index.html [L]

Nginx服务器 #

在Nginx的配置文件中，找到对应域名的server块，添加：

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

配置完成后重启服务器，这样所有指向/myapp下的路由请求都会转发到Angular的index.html，由Angular自己处理路由。

4. 切换到哈希路由模式（无需服务器配置） #

如果不想修改服务器配置，可以切换到HashLocationStrategy（URL带#的模式），这种模式下服务器不会解析#后面的路径，完全由Angular处理。

在AppModule中添加配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

切换后，访问http://foobar.com/myapp时，URL会自动变为http://foobar.com/myapp/#/，不会出现截断问题，路由也能正常加载ConfigureComponent。

5. 测试验证 #

完成上述配置后，重新构建并部署到服务器，直接访问http://foobar.com/myapp：

• 若用HTML5模式，URL应保持为http://foobar.com/myapp，正常显示组件
• 若用哈希模式，URL会显示http://foobar.com/myapp/#/，组件加载正常

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