Angular 17路由异常：URL重复添加页面路径及资源加载404排查

问题1：资源请求路径自动添加路由前缀导致404 #

原因 #

• 静态资源（图片、翻译文件、样式文件等）使用了相对路径而非绝对路径。比如在/editors路由下，模板里写<img src="assets/logo.png"会被浏览器解析为/editors/assets/logo.png，而非正确的根路径资源地址。
• index.html中的<base href>配置错误，比如未设置为根路径，会导致资源路径解析逻辑异常。

解决方法 #

• 所有静态资源路径统一使用绝对路径（以/开头），例如：
  • 模板中：<img src="/assets/logo.png">
  • 样式中：background: url('/assets/bg.jpg')
• 检查index.html的<base href>标签，确保配置为<base href="/">，这是Angular单页应用的标准根路径配置。

问题2：返回首页后URL未恢复根路径，再次进入editors路由出现重复前缀 #

原因 #

返回首页时使用了相对路径导航，而非绝对路径导航：

• 模板中用<a routerLink="">回到首页</a>或<a href="">回到首页</a>，当当前路由是/editors时，相对导航会解析为/editors/，而非根路径/。
• 组件逻辑中用router.navigate([''])导航，同样会基于当前路由生成相对路径，导致首页URL异常。

解决方法 #

• 所有指向首页的导航统一使用绝对路径：
  • 模板中改为：<a routerLink="/">回到首页</a>
  • 组件逻辑中改为：this.router.navigate(['/'])
• 你的首页路由已经配置了pathMatch: 'full'，这部分是正确的，确保只有完全匹配根路径时才加载HomeComponent，无需修改。

额外优化点 #

你在app.config.ts的providers数组中重复添加了三次provideClientHydration()，建议删除重复项，只保留一次，避免不必要的重复注册：

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, inMemoryScrollingFeature),
    provideLottieOptions({
      player: () => import('lottie-web'),
    }),
    provideAnimations(),
    provideHttpClient(),
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }).providers!, 
    provideClientHydration() // 仅保留一次
  ],
};

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