Angular 2 support

[truongsinh]

Do you plan to support angular 2 natively?

[rubenv]

Angular 2 is a completely different framework so there's little code we'll be able to take along.

There are also plans by the Angular team to integrate a po-file based translation system, so it might be supported out of the box.

I'm currently waiting to see what will happen.

[truongsinh]

There are also plans by the Angular team to integrate a po-file based translation system

Wow I never know that, can you give me the reference? So far I believe they only work with ICU format

[intellix]

@truongsinh https://github.com/angular/i18n is the repository you're looking for Edit: it's in the angular/angular main repository now I believe

[john-k-rice]

Any update on your Angular2 plans?

[wizardofjoz]

Now Angular 2.0 final is out since yesterday we're starting to see some of the specifications settle down.

Below is a link to a basic Angular 2 i18n example (though still written for Angular RC6 - a month ago or so) https://github.com/StephenFluin/i18n-sample

To scrape translations from your templates you should use the ng-xi18n cli tool that's bundled with the Angular compiler tool (ngc). Note that although Angular 2 is final lots of it's side projects (like Angular CLI) are still in Beta and under development.

Also note that right now gettext .po files are not supported yet (only XLIFF and XMB if I'm not mistaken)

[rubenv]

@wizardofjoz Thanks for the pointers, I'm sure many of the angular-gettext users are very interested in where to go from here.

I noticed that the most simple form of Angular 2 i18n is this: <h2 i18n>Attribute sample</h2>, which will feel very familiar to angular-gettext users.

This is the same sweet spot I was looking for with angular-gettext. The exact implementation in Angular 2 is (obviously) very different but what matters the most, the developer experience, is the same sweet simplicity.

I for one would thus recommend anyone to look into the built-in i18n support in Angular 2. I won't be updating angular-gettext to an Angular 2 version: that's simply not needed.

It's certainly not the case, but I'd love to believe that angular-gettext showed the Angular 2 developers what was possible for i18n and helped guide the concepts. Thanks to everyone who helped out!

[wizardofjoz]

@rubenv The Angular i18n team did know about angular-gettext and had a look. Proof of which can be found on the team's draft document "Angular and the internationalization: The New World" https://docs.google.com/document/d/1mwyOFsAD-bPoXTk3Hthq0CAcGXCUw-BtTJMR4nGTY-0/edit#heading=h.ixg45w3363q (some people pointed to Angular-gettext in the remarks)

[HarelM]

I have all my strings written in a single service (no text is written in the html only variables). Is there a gettext service I can use with angular 2 until the following issue is fixed (which is externally basic IMHO for toasting messages from components): https://github.com/angular/angular/issues/11405 My code can be seen here: https://github.com/IsraelHikingMap/Site/blob/master/IsraelHiking.Web/wwwroot/services/ResourcesService.ts

[quedicesebas]

News? I don't see the approach inc;uded in Angular.io

[quedicesebas]

I found it https://angular.io/guide/i18n but it can't be used with Ionic! :( instead ngx-translate, but is to bad, not like get-text

[dgroh]

@sebrojas14 i18n is as good as gettext, except the fact there are a few issues if you are working with sass instead of css which I'm trying to fix right now. But the most annoying thing of i18n is thar are no good editors like POEdit for xlf files.

[HarelM]

I ended up writing a simple injectable angular gettext catalog service for my site in order to facilitate for some of the functionality of get text. The following is the service: https://github.com/IsraelHikingMap/Site/blob/master/IsraelHiking.Web/sources/application/services/GetTextCatalogService.ts It's pretty simple but does what I need since all of the text is currently in one location in my app, here: https://github.com/IsraelHikingMap/Site/blob/master/IsraelHiking.Web/sources/application/services/ResourcesService.ts Hope this can help anyone who's interested.

[Sampath-Lokuge]

@sebrojas14 What are the issues do you have with Ionic? I have purchased below project.He did it using i18n and Ionic 3.But still, I didn't explore it yet.Hope no problem with Ionic and i18n.

Ionic 3 + Angular 4 + i18n Full App

[vslavik]

But the most annoying thing of i18n is thar are no good editors like POEdit for xlf files.

Poedit developer here. I plan to add XLIFF (and angular-gettext…) support, if you would find it useful, please feel free to thumbs-up this issue: https://github.com/vslavik/poedit/issues/408

EDIT: Poedit 2.2 has XLIFF support and Angular files were a specific focus.

[mamsori]

I found below library which seems to be good fit for ng2 translation solution because it uses a gettext format, supports an interpolation param and extractor tool. https://github.com/ngx-translate/core

[quedicesebas]

@mamsori that its the one recommended by Ionic, but definitly is not like gettext, with that library you have to use keys

[confraria]

@sebrojas14 any luck here? I'm was trying to use ngx-translate and just realized that we have to use keys there..:/ found any alternative?

[HarelM]

As mentioned earlier, I have implemented a simple gettext catalog here - the previous link is dead, it serves most of my needs. https://github.com/IsraelHikingMap/Site/blob/master/IsraelHiking.Web/sources/application/services/gettext-catalog.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable()
export class GetTextCatalogService {

    private strings: {};
    private baseLanguage: string;

    constructor(private readonly httpClient: HttpClient) {
        this.strings = {};
    }

    public setCurrentLanguage(lang: string): void {
        this.baseLanguage = lang;
    }

    public getCurrentLanguage(): string {
        return this.baseLanguage;
    }

    public getString(word: string, scope?: any, context?: string): string {
        return this.strings[word] as string || word || "";
    }

    public async loadRemote(url: string): Promise<any> {
        let response = await this.httpClient.get(url).toPromise();
        this.strings = response[this.getCurrentLanguage()];
    }
}