Package Exports

ngx-translate-phraseapp

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-translate-phraseapp) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.

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