Awesome Open Source
Awesome Open Source

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:

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

Get help / support

Please contact [email protected] and we can take more direct action toward finding a solution.

Alternatives To Ngx Translate Phraseapp
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (255,004
Angular (54,868
Editor (31,934
Translation (13,587
Angularjs (11,927
Translate (5,093
I18n (4,847
Ngx (2,520
L10n (660
Ngx Translate (43
Phraseapp (18