Integrate the PhraseApp InContext-Editor with ngx-translate
Clone or download
Latest commit d53b400 Sep 21, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add support for nested keys Sep 13, 2018
.gitignore Reduce dependencies Feb 5, 2018
LICENSE Init Feb 2, 2018
README.md Add readme adapter description Feb 16, 2018
package-lock.json Update ts-loader Sep 19, 2018
package.json Update ts-loader Sep 19, 2018
tsconfig.json Update ts-loader Sep 19, 2018
webpack.config.js Add typings Jun 5, 2018

README.md

ngx-translate-phraseapp

ngx-translate-phraseapp is an addon for ngx-translate that lets you connect localized Angular applications to the PhraseApp 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 PhraseApp 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: phraseapp.com/contact

Issue? Create a GitHub issues and share the problem