部署Angular+FastAPI应用时指定0.0.0.0后UI组件不显示

现象 #

• 本地执行uvicorn main:app --port 8000 --reload启动时，Angular UI完全正常显示
• 切换为uvicorn main:app --host 0.0.0.0 --port 8000 --reload部署后，能加载index.html和顶部导航栏，但内容组件无法显示
• 直接用ng serve --host 0.0.0.0启动Angular也会出现相同问题

环境信息 #

• Angular构建命令：

ng build --base-href ./

• FastAPI挂载静态文件代码：

app.mount(
"/frontend",
StaticFiles(
    directory=str("frontend/dist/frontend"),
    html=True,
),
name="frontend",
)

• 文件结构：

app
├──frontend
│   ├──src
│   │  ├──index.html
│   │  ├──...
│   ├──angular.json
│   ├──...
├──main.py
├──...

问题原因 #

核心是**base-href设置与FastAPI的挂载路径不匹配**。当用0.0.0.0部署后，外部访问的URL路径为http://<你的IP>/frontend，但--base-href ./会让Angular从当前URL的相对位置加载资源，导致js、css等静态资源请求路径错误（比如请求http://<你的IP>/main.js而非http://<你的IP>/frontend/main.js），进而组件无法正常加载。

解决方案 #

1. 修改Angular构建的base-href
   将构建命令改为匹配FastAPI的挂载路径：

   ng build --base-href /frontend/
   

   注意路径末尾的斜杠不能省略，确保Angular所有资源都从/frontend/路径下加载。

2. 验证资源加载状态
   重新构建并启动服务后，打开浏览器开发者工具（F12）切换到Network标签，检查所有js、css文件的请求状态。如果都是200则路径正确，若仍有404需排查路由配置问题。

3. 路由适配（若使用Angular路由）
   若启用了Angular HTML5路由模式，需确保FastAPI的StaticFiles已设置html=True（你已配置），避免刷新页面时出现404。如果问题仍存在，可切换为HashLocationStrategy，在app-routing.module.ts中配置：

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes, ExtraOptions } from '@angular/router';
   
   const routerOptions: ExtraOptions = {
     useHash: true,
     // 其他路由配置...
   };
   
   const routes: Routes = [/* 你的路由规则 */];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes, routerOptions)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
   

4. 重新部署
   用新构建的内容替换FastAPI挂载的frontend/dist/frontend目录，重启uvicorn服务即可。

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