README
ngx-translate-phraseapp
ngx-translate-phraseapp is an addon for ngx-translate that lets you connect localized Angular applications to the Phrase In-Context Editor.
Prerequisites
To use ngx-translate-phraseapp with your application you have to:
- Sign up for a Phrase 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
Configure
let config = {
projectId: '<YOUR_PROJECT_ID>',
phraseEnabled: true,
prefix: "{{__",
suffix: "__}}",
fullReparse: true
};
You can find the Project-ID in the Project overview in the Phrase Translation Center.
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 = {
// ...
autoLowercase: false
}
Code snippets
Add the following snippets to your Angular app:
app.component.ts
import { initializePhraseAppEditor, PhraseAppCompiler} from 'ngx-translate-phraseapp'
let config = {
projectId: '<YOUR_PROJECT_ID>',
phraseEnabled: true,
prefix: "{{__",
suffix: "__}}",
fullReparse: 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'
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.
Development
Build from source
You can also build it directly from source to get the latest and greatest:
npm install
npm run dist
Support
Question? Contact us at: phrase.com/contact
Issue? Create a GitHub issues and share the problem