Angular v14 SPA部署到站点子路径路由空白问题咨询

白屏问题由两个配置错误共同导致：

1. 路由写法逻辑错误：你当前使用的{ path: '', children: [{ path: '**', component: GalleryViewComponent}]} 配置中，通配符**被嵌套在空路径的子路由下，Angular路由从根节点自上而下匹配时，无法命中这个嵌套在子层的通配规则，组件不会被渲染。
2. 部署路径与构建配置不匹配：Angular默认构建时以站点根路径/作为基础路径，当你把构建产物部署到/mysite/galleries/angSPA这类子路径时，静态资源、路由解析都会从站点根目录寻址，直接导致资源404、路由匹配失败，最终页面空白。

按以下步骤修改即可实现「无需重新编译，放到站点任意目录都能正常访问」的需求：

• 修正根路由配置
  删除无意义的空父路由嵌套，直接在根路由表中配置兜底通配规则；如果要最大化部署灵活性，直接开启哈希路由模式——该模式下路由参数拼接在URL的#后，不会发送到服务器，不需要额外配置服务器重写规则，不受部署子路径影响。
  修正后的路由模块代码参考：

  // app-routing.module.ts
  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { GalleryViewComponent } from './gallery-view/gallery-view.component';
  
  const routes: Routes = [
    // 其他业务路由统一放在通配规则之前
    { path: '**', component: GalleryViewComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, {
      useHash: true // 开启哈希路由，适配任意部署路径
    })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

• 配置相对路径基础地址
  构建时将base href设置为相对路径./，构建后的应用会自动以当前所在目录为基准加载所有静态资源，放到任意层级的子目录都不会出现资源寻址错误。
  两种配置方式二选一即可：
  1. 构建命令追加参数：

  ng build --base-href ./
  

  2. 修改angular.json构建配置，一劳永逸：
     在projects.<你的项目名>.architect.build.options节点下添加配置：

  "baseHref": "./"
  

  配置完成后直接执行ng build即可。
• （可选）PathLocationStrategy模式适配
  如果不想使用带#的哈希路由，坚持用默认的路径式路由，不需要修改前端构建配置，但必须在部署目录对应的服务器配置中添加重写规则，将该路径下的所有请求都重定向到index.html。以Nginx为例，部署到/mysite/galleries/angSPA路径时的配置如下：

  location /mysite/galleries/angSPA/ {
    try_files $uri $uri/ /mysite/galleries/angSPA/index.html;
  }
  

  注意这种方式下更换部署路径时，需要同步修改服务器重写规则，灵活性不如哈希路由+相对base的方案。

将构建生成的dist目录产物上传到目标部署路径，直接访问对应地址即可，不需要修改任何编译后的代码，也不需要在源码中硬编码部署路径。

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