how to setup external library with ng2admin (like ng2translate)

[akveo]

how to setup external library with ng2admin (like ng2translate)

[nnixaa]

@sanathpathiraja if you want to globally include translate pipe, add it to APPLICATION_PIPES array in src\platform\browser\pipes.ts. In this case, you won't need to import and explicitly register the pipe in each component.

[sanathpathiraja]

yes i did that.

app/index.ts
// App
import {AppState} from "./app.state";
import {TRANSLATE_PROVIDERS,
TranslateService,
TranslateLoader,
TranslateStaticLoader} from 'ng2-translate/ng2-translate';
import {provide} from '@angular/core';
import {Http} from '@angular/http';
export * from './app.component';

// Application wide providers
export const APP_PROVIDERS = [
AppState,
provide(TranslateLoader, {
useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
deps: [Http]
}),
TRANSLATE_PROVIDERS,
TranslateService
];

app.component.ts
import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
export class App {

isMenuCollapsed:boolean = false;
constructor(private _state:AppState, private _imageLoader:BaImageLoaderService, private _spinner:BaThemeSpinner, translate: TranslateService) {
translate.setDefaultLang('en');

but translate not working.
can you help me?

[nnixaa]

@sanathpathiraja still you haven't loaded the pipe globally, here the minimal steps:

1. install the module
2. in src/platform/broswers/pipes.ts add translate pipe like this:

import {TranslatePipe} from 'ng2-translate/ng2-translate';

// application_pipes: pipes that are global through out the application
export const APPLICATION_PIPES = [
  TranslatePipe // <----- add the pipe HERE
];

// the rest of the code

1. in src/platform/broswers/providers.ts add TRANSLATE_PROVIDERS like this:

import {TRANSLATE_PROVIDERS} from 'ng2-translate/ng2-translate';

/*
* Application Providers/Directives/Pipes
* providers/directives/pipes that only live in our browser environment
*/
export const APPLICATION_PROVIDERS = [
  ...FORM_PROVIDERS,
  ...HTTP_PROVIDERS,
  ...ROUTER_PROVIDERS,
  TRANSLATE_PROVIDERS, // <--- HERE the providers
  {provide: LocationStrategy, useClass: HashLocationStrategy }
];

// the rest of the code

1. now use it in any template you need to

[sanathpathiraja]

yes, I added that after I change
src/main.browser.js

`export function main(initialHmrState?: any): Promise {

return bootstrap(App, [
...PROVIDERS,
...ENV_PROVIDERS,
...DIRECTIVES,
...PIPES,
...APP_PROVIDERS,
HTTP_PROVIDERS,
provide(TranslateLoader, {
useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
deps: [Http]
}),
// use TranslateService here, and not TRANSLATE_PROVIDERS (which will define a default TranslateStaticLoader)
TranslateService
])
.catch(err => console.error(err));`

after run it perfectly.
thanks @nnixaa