Core: YAML format is unreadable by @ngx-translate

[dmotorny]

I'm submitting a ...

[x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
@ngx-translate/core: ^9.1.1 API can't read the data from en.yml file in YAML-format. With JSON-format in same file everything is ok.

Expected/desired behavior
That API can read an YAML-format.

Reproduction of the problem

export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/yaml/', '.yml');
}

Readable JSON-format in 'en.yml':

"global": {
      "lang": "Change language"
 } 

Unreadable but right YAML-format in 'en.yml':

global:
    lang: Change language

What is the motivation / use case for changing the behavior?
I'm using YAML much often than JSON last time, and an API looks quite smart. I'd use it in my project, if it only could work with YAML-format. Thanks @ocombe for such great lib!

Please tell us about your environment:

• ngx-translate version: 9.1.1

• Angular version: 5.2.10

• Browser: [all]

[ocombe]

You can write your own loader for that, copy https://github.com/ngx-translate/http-loader/blob/master/lib/src/http-loader.ts and change it to make it read yaml (you'll probably need to import a library that understand yaml).

[dmotorny]

Thanks a lot! Really helpful!!!
Great lib!

[artyhedgehog]

OK, so now that link is broken, but seems this works: https://github.com/ngx-translate/http-loader/blob/master/projects/ngx-translate/http-loader/src/lib/http-loader.ts

And so the loader version that works for me:

// src/app/yaml-http-loader.ts
import { HttpClient } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import * as yaml from 'js-yaml';

export class YamlHttpLoader implements TranslateLoader {
  constructor(
    private http: HttpClient,
    public prefix: string = '/assets/i18n/',
    public suffix: string = '.yaml'
  ) {}

  /**
   * Gets the translations from the server
   */
  public getTranslation(lang: string): Observable<Object> {
    return this.http.get(`${this.prefix}${lang}${this.suffix}`, {
      responseType: 'text'
    }).pipe(
      map((value: string) => yaml.safeLoad(value)),
    );
  }
}

And here's what happens in .module.ts file - just in case:

// src/app/app.module.ts
...
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
...
import { YamlHttpLoader } from './yaml-http-loader';
...

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new YamlHttpLoader(httpClient);
}

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

For parsing yaml I installed js-yaml:

yarn add js-yaml
yarn add -D @types/js-yaml

[jonathan-chin]

OK, so now that link is broken, but seems this works: https://github.com/ngx-translate/http-loader/blob/master/projects/ngx-translate/http-loader/src/lib/http-loader.ts

And so the loader version that works for me:

// src/app/yaml-http-loader.ts
import { HttpClient } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import * as yaml from 'js-yaml';

export class YamlHttpLoader implements TranslateLoader {
  constructor(
    private http: HttpClient,
    public prefix: string = '/assets/i18n/',
    public suffix: string = '.yaml'
  ) {}

  /**
   * Gets the translations from the server
   */
  public getTranslation(lang: string): Observable<Object> {
    return this.http.get(`${this.prefix}${lang}${this.suffix}`, {
      responseType: 'text'
    }).pipe(
      map((value: string) => yaml.safeLoad(value)),
    );
  }
}

And here's what happens in .module.ts file - just in case:

// src/app/app.module.ts
...
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
...
import { YamlHttpLoader } from './yaml-http-loader';
...

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new YamlHttpLoader(httpClient);
}

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

For parsing yaml I installed js-yaml:

yarn add js-yaml
yarn add -D @types/js-yaml

thanks @artyhedgehog this worked perfectly and you saved me an hour or so!