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.

:scroll: Documentation

$3

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

$3

You can find a demo projects in ./examples directory:
- example for Angular 11.
- example for Angular 17.

Examples have their own README.mds with instructions how to run them.

$3

#### NPM

``bash
npm install ngx-translate-phraseapp
`

#### Build from source

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

`bash
npm run dist
`

$3

Run the Jest suite (with coverage reporting enabled) using Yarn:

`bash
yarn test
`

This command executes all unit tests and writes coverage artifacts to the coverage/ directory so you can inspect the lcov-report output in a browser if needed.

For development you can also use watch mode:

`bash
yarn test:watch
`

$3

#### Configure

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

let config: PhraseConfig = {
projectId: '',
accountID: ''
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:

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

#### Using the old version of the ICE
Starting from version 1.1.0 new version of ICE is supported and used by default.

To use the old version of ICE, use option useOldICE: true in your PHRASEAPP_CONFIG or integration options
`js
let config = {
projectId: '',
accountID: '',
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.
`js
datacenter: 'us'
`

$3

Add the following snippets to your Angular app:




app.component.ts

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

let config: PhraseConfig = {
projectId: '',
accountID: ''
phraseEnabled: true,
};

initializePhraseAppEditor(config);
`





app.module.ts

`js
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.

:white_check_mark: 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`

:question: 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.

:memo: Changelog

Detailed changes for each release are documented in the changelog.