ngx-translate-phraseapp

ngx-translate-phraseapp is the official library for integrating Phrase Strings In-Context Editor with ngx-translate in your Angular application.

Ivy

Since Angular 13 the View Engine has been removed, and since 1.0.0 the ngx-translate-phraseapp package uses new version of Angular which might cause old projects to break. In this case try major version 0 package of this repository.

📜 Documentation

Prerequisites

To use ngx-translate-phraseapp with your application you have to:

• Sign up for a Phrase Strings account: https://phrase.com/signup
• Use ngx-translate module for localization in your Angular 2+ app

Demo

You can find a demo project on GitHub.

Installation

NPM

npm install ngx-translate-phraseapp

Build from source

You can also build it directly from source to get the latest and greatest:

npm run dist

Usage

Configure

import { initializePhraseAppEditor, PhraseConfig } from 'ngx-translate-phraseapp';

let config: PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseEnabled: true,
};

You can find the Project-ID in the Project overview in the Phrase Strings Translation Center. The Account-ID can be found in the Organization settings.

By default, the In-Context Editor’s document parser converts all keys to lowercase. If you’re experiencing issues with this behavior and want to use case-sensitive keys within the In-Context Editor, consider disabling the automatic lowercase feature:

let config: PhraseConfig = {
  // ...
  autoLowercase: false
}

Using the old version of the ICE

To use the old version of ICE, use option useOldICE: true in your PHRASEAPP_CONFIG or integration options

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  useOldICE: true,
};

initializePhraseAppEditor(config);

Using the US Datacenter with ICE

In addition to the settings in your config, set the US datacenter to enable it working with the US endpoints.

  datacenter: 'us'

Code examples

Add the following snippets to your Angular app:

app.component.ts

import { initializePhraseAppEditor, PhraseAppCompiler, PhraseConfig} from 'ngx-translate-phraseapp'

let config: PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseEnabled: true,
};

initializePhraseAppEditor(config);

app.module.ts

import { TranslateModule, TranslateLoader, TranslateCompiler } from '@ngx-translate/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { PhraseAppCompiler } from 'ngx-translate-phraseapp'
import { AppComponent } from './app.component';


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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

If this does not work for you, you can also integrate the JavaScript snippet manually.

✅ Commits & Pull Requests

We welcome anyone who wants to contribute to our codebase, so if you notice something, feel free to open a Pull Request! However, we ask that you please use the Conventional Commits specification for your commit messages and titles when opening a Pull Request.

Example: chore: Update README

❓ Issues, Questions, Support

Please use GitHub issues to share your problem, and we will do our best to answer any questions or to support you in finding a solution.

📝 Changelog

Detailed changes for each release are documented in the changelog.