повторно использовать файлы перевода * .resx (AngularJS) в гибридном приложении AngularJS / Angular 5

Question

Здравствуйте, у меня есть приложение AngularJS, которое использует для интернализации файлы $ translateProvider и WebResources.resx:

angular.module('app')
    .config(['$translateProvider', 'sysSettings', 'ngDialogProvider',
        function($translateProvider, sysSettings, ngDialogProvider) {
            ngDialogProvider.setDefaults({
                closeByDocument: false
            });

            sysSettings.device = window['device'];

            if (window['device'] && ktmvPreference && ktmvPreference.preference) {
                sysSettings.webServiceURL = ktmvPreference.preference.webServiceURL;
                sysSettings.reportServiceURL = ktmvPreference.preference.reportServiceURL;
                sysSettings.onlineHelpURL = ktmvPreference.preference.onlineHelpURL;
            }

            $translateProvider.useSanitizeValueStrategy(null);
            $translateProvider.useLocalStorage();

            var savedLanguage = localStorage.language;
            if (savedLanguage)
                $translateProvider.fallbackLanguage([savedLanguage]);
            else
                $translateProvider.fallbackLanguage(['en', 'fr', 'es']);

            var url = sysSettings.webServiceURL + 'api/GlobalResources';

            $translateProvider.useUrlLoader(url);
            $translateProvider.useMissingTranslationHandlerLog();
            $translateProvider.useMissingTranslationHandler('ktmvTranslationFail');
        }
    ]);

Сейчас я делаю приложение AngularJS / Angular5 Hybrid. Как уже упоминалось в документации, Angular5 использует «i18n» для интернационализации. «i18n» использует файлы «* .xlf» для хранения переводов.

Таким образом, единственный способ в приложении AngularJS / Angular5 сохранять файлы WebResources.resx и messages.xlf в одном контексте?

Есть ли способ повторно использовать перевод WebResources.resx из AngularJS в приложении AngularJS / Angular?

Answer 1

Может быть, кому-то это пригодится ... Чтобы иметь возможность повторно использовать файлы * / resx в моей интернализации AngularJS / Angular, я начал использовать библиотеку ngx-translate. Вот как я это реализовал: Я создал custom-translate-loader.ts

import { Injectable } from '@angular/core';
import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from 'rxjs/Observable';
import {HttpClient} from "@angular/common/http";


@Injectable()
export class CustomTranslateLoader implements TranslateLoader  {

  constructor(private http: HttpClient) {}
  getTranslation(lang: string): Observable<any>{
    var apiAddress = "http://localhost:26264/api/GlobalResources/?lang=" + lang;
    return Observable.create(observer => {
      this.http.get(apiAddress, ).subscribe(res => {
          observer.next(res);
          observer.complete();
        },
        error => {
          console.log("cannot retrieve Global Resources");
        }
      );
    });
  }
}

затем в моем app.module.ts я импортировал

import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {CustomTranslateLoader} from "./common/loader/custom-translate-loader";

и в моем NgModule я ввел TranslateModule:

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
    FormsModule,
    routingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: CustomTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [
    AppComponent,
    SignInComponent,
    ActivationComponent
  ],
  providers: [authServiceProvider,
    commonSvcProvider,
    BackgroundImageFactoryProvider,
    LanguageSvcProvider
  //  { provide: UrlHandlingStrategy, useClass: CustomHandlingStrategy }
  ],
  bootstrap: [AppComponent]
})

После этого в моих компонентах (например, sign-in.components.ts) я могу настроить язык:

import {TranslateService} from "@ngx-translate/core";

export class SignInComponent implements OnInit{
  constructor(
    private translate: TranslateService) {

    translate.setDefaultLang('en');

  }