找不到 ngx 翻译文件答案

【问题标题】：Cannot find ngx-translate files找不到 ngx 翻译文件
【发布时间】：2023-11-01 05:16:01
【问题描述】：

我正在尝试从 tutorial 实现 ngx-translate：

当我使用 npm start 在本地运行 Angular 应用程序时，它工作正常。但是当我想像这样使用自定义子目录时：ng build --output-path angular --base-href=/angular/ 并将其部署在 Apache 服务器上。

文件位于src\assets\i18n\en.json下

我收到多个这样的错误：

message: "Http failure response for http://123.123.123.123/assets/i18n/en.json: 404 Not Found"

你知道如何解决这个问题吗？

【问题讨论】：

标签： angular internationalization angular8 angular9 angular-i18n

【解决方案1】：

我在一个 Angular 6 应用程序中使用以下方法，看看它是否可以帮助您找到解决方案：

app.module.ts

// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

const i18n_route = environment.production ? './assets/i18n/' : '../assets/i18n/';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, i18n_route, '.json');
}

  @NgModule({
  declarations: [
  ...
  ]
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
  ],
  ...

【讨论】：

【解决方案2】：

另一种方法是使用 @angular/common 包中的 LocationStrategy 类。这样就可以获得应用程序的实际基础href。

export function HttpLoaderFactory(http: HttpClient, locationStrategy: LocationStrategy) {
  const loader = new TranslateHttpLoader(http);
  loader.prefix = `${locationStrategy.getBaseHref()}assets/i18n/`;
  return loader;
}



@NgModule({
declarations: [
...
]
imports: [
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient, LocationStrategy],
    }
  }),
]

使用上述方法，如果您的 base-href 设置为 /angular，则资产路径将为 /angular/assets/i18n/

【讨论】：