Angular路由本地正常部署服务器报404且URL自动追加组件名如何解决

问题排查与解决方案 #

1. 部署后访问指定路由报404 #

你已开启哈希路由模式{useHash: true}，符合该模式的正确访问路径格式为域名:端口/schwarzes-brett/#/bla/部门参数，如果直接访问不带#的路径，服务器会将路径识别为真实静态资源地址查找，找不到对应资源就会返回404。
额外注意：

• 所有内部路由跳转请统一使用Angular提供的routerLink指令或者Router.navigateAPI，不要使用原生a标签的href属性跳转，避免生成不带#的异常路径
• 如果不需要哈希路由要使用History模式，需要额外配置服务器的URL重写规则，将所有前端路由请求全部重定向到index.html。

2. 访问根路径ns400gt:8020/schwarzes-brett/自动追加组件名、运行异常 #

• 你当前仅配置了bla/:abteilung一条路由规则，没有空路径匹配或重定向规则，访问根路径时没有命中任何有效路由，如果你的代码中配置了通配符路由（**）且重定向逻辑错误，就会出现自动跳转追加异常内容的问题，建议补充路由规则：

const routes: Routes = [
  { path: 'bla/:abteilung', component: SchwarzesBrettComponent, pathMatch: 'full' },
  // 空路径重定向到带默认部门参数的路由，可替换为实际默认值
  { path: '', redirectTo: 'bla/defaultAbteilung', pathMatch: 'full' },
  // 通配符路由，匹配所有不存在的路径跳转到默认路由
  { path: '**', redirectTo: '' }
];

• 你的组件代码没有做路由参数非空校验，当路由中不存在abteilung参数时，this.route.snapshot.paramMap.get('abteilung')会返回null，后续执行charAt(0)会抛出JS异常，如果你配置了全局错误拦截跳转逻辑，也会导致URL异常，建议补充校验逻辑：
  首先在组件构造器中注入Router：

constructor(
  private dbService: DbService,
  private ccs: ComponentCommunicationService,
  private route: ActivatedRoute,
  private router: Router // 新增Router注入
) { }

修改ngOnInit逻辑：

ngOnInit(): void {
  this.abteilung = this.route.snapshot.paramMap.get('abteilung');
  // 参数为空时跳转到默认路由
  if (!this.abteilung) {
    this.router.navigate(['/bla/defaultAbteilung']);
    return;
  }
  this.abt = this.abteilung.charAt(0).toUpperCase() + this.abteilung.slice(1);
  this.dbService.getDokumente(this.abteilung).subscribe(
    data => {
      this.dokumente = data;
      this.openDokument(this.dokumente[0].id);
    }
  );
}

其他优化建议 #

• 打包时建议显式指定base-href参数：ng build --base-href /schwarzes-brett/，避免配置不生效
• 组件内的静态资源路径可以改为相对路径，比如<img src="assets/gw2.png">，配合base href自动适配，后续修改部署路径无需逐个调整资源地址
• 确认服务器上的Angular打包产物确实部署在/schwarzes-brett/根目录下

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