Angular 8部署Github Pages失败：NGX Translate资源404求助

兄弟，我之前踩过一模一样的坑！你的问题根本不是NGX Translate和Github Pages不兼容，就是资源路径没跟上base-href的前缀导致的404。你本地运行时base-href是根目录/，所以请求/assets/i18n/fr.json没问题，但部署到Github Pages后，你的项目挂载在/dentist-angular/路径下，NGX Translate还在请求根目录的资源，自然就找不到了。

下面是具体的解决步骤：

1. 修改NGX Translate的加载路径为动态base-href拼接 #

你需要在app.module.ts里注入APP_BASE_HREF，让翻译文件的加载路径自动带上部署的base-href前缀：

import { APP_BASE_HREF } from '@angular/common';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

// 动态生成翻译文件加载路径
export function createTranslateLoader(http: HttpClient, baseHref: string) {
  // 处理重复斜杠的情况，确保路径格式正确
  const normalizedPath = `${baseHref}assets/i18n/`.replace(/\/+/g, '/');
  return new TranslateHttpLoader(http, normalizedPath, '.json');
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        // 注入HttpClient和APP_BASE_HREF依赖
        deps: [HttpClient, APP_BASE_HREF]
      }
    })
  ],
  // 这里的useValue本地开发时可以设为'/',部署时会被ng deploy的--base-href覆盖
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})
export class AppModule { }

2. 清理缓存重新部署 #

Github Pages和angular-cli-ghpages插件有时候会有缓存问题，重新部署时加上--no-cache参数强制刷新：

ng deploy --base-href=/dentist-angular/ --no-cache

3. 验证路径是否正确 #

部署完成后，打开浏览器控制台检查网络请求，正常情况下翻译文件的请求URL应该是：
https://jamesross06000.github.io/dentist-angular/assets/i18n/fr.json
如果路径正确，就不会再出现404错误了。

另外提醒下，Github Pages部署后可能需要等1-2分钟才能生效，要是刚部署完还报错，先强制刷新浏览器（Ctrl+F5）试试。

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