angular - ngx-translate 只加载 i18n 文件夹中的一个文件

Question

我试图在我的网络应用程序中添加翻译机制，但只加载了 en.json 文件。fr.json 不是。

1-我安装了

"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",

HttpClientModule2-我用and配置 app.moduleTranslateModule

     @NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SplashScreenModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),

    HighlightModule,
    ClipboardModule,
    AppRoutingModule,
    InlineSVGModule.forRoot(),
    NgbModule,
  ],
  providers: [
    CookieService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializer,
      multi: true,
      deps: [AuthService],
    },
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        languages: {
          xml: () => import('highlight.js/lib/languages/xml'),
          typescript: () => import('highlight.js/lib/languages/typescript'),
          scss: () => import('highlight.js/lib/languages/scss'),
          json: () => import('highlight.js/lib/languages/json')
        },
      },
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

export  function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http);
}

3-我在页脚中配置翻译

  languageList: object[] = [{ name: 'French' , code: 'fr'}, { name: 'English', code: 'en'}];

  constructor(private layout: LayoutService,
              public translateService: TranslateService) {

    // translation initialisation
    translateService.addLangs(['en', 'fr']);
    translateService.setDefaultLang('fr');

    let browserLang = translateService.getBrowserLang();

    if (localStorage.getItem('lang')) {
      browserLang = localStorage.getItem('lang');
    }
    translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  }

并在 html 文件中

<select class='select-option language-btn language-change-select' #languageSelected  (change)='selectLanguage(languageSelected.value)'>
      <option class='option'
              *ngFor='let language of languageList'
              [value]="language.code">{{ language.name }}</option>
</select>

对于英语，它运行良好，但是当我选择法语时，文件未加载。我的 en.json

{
  "footer":{
    "language":"Language",
    "change-language":"Change language"
  },

  "header":{

  },
  "home":{
  },
  "menu": {
    "home": "Home",
    "apps": "Apps",
    "games": "Games",
    "ebooks": "Ebooks"
  },
  "creators":{

  }
}

和 fr.json 文件

{
  "footer":{
    "language":"Langue",
    "change-language":"Changer de langue"
  },

  "header":{

  },
  "home":{
  },
  "menu": {
    "home": "Accueil",
    "apps": "Applis",
    "games": "Jeux",
    "ebooks": "Livres"
  },
  "creators":{

  }
}

请问你知道做错了什么吗？

标签： angularngx-translate