Issue on Angular 2 RC5 with global pipes

Question

I'm having some troubles integrating the ng2-translate in angular 2 RC5 for other components different than the main app.

I want to use the pipe globally, and in a research i found that probably i need to use a "provider" (but that is on RC4), and then found that i need to use the "declarations". Any ideas?

As always... thanks so much for the help!

When i use in a template file, the:

I get this error on the browser:

The pipe 'translate' could not be found ("<h1>title test</h1>
<h2>[ERROR ->]{{ 'HOME.TITLE' | translate }}</h2>

This is my main.ts file:

// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

The main module file:

import {TranslateModule, TranslateService} from "ng2-translate/ng2-translate";


@NgModule({
 imports: [
   BrowserModule,
   HttpModule,
   RouterModule.forRoot(routes),
   AboutModule,
   HomeModule,
   SharedModule.forRoot(),
   TranslateModule.forRoot()
  ],
 declarations: [AppComponent],
 providers: [{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  }],
 bootstrap: [AppComponent]
})

export class AppModule { }

score 4 · Answer 1 · answered Aug 24 '16 at 03:46

Use shared.module and export TranslatePipe.

shared.module.ts

// libs

// libs
import { NgModule, ModuleWithProviders }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { TranslateModule, TranslatePipe } from 'ng2-translate/ng2-translate';

@NgModule({
    imports: [
        CommonModule,
        TranslateModule
    ],
    declarations: [

    ],
    exports: [
        CommonModule,
        TranslateModule,
        TranslatePipe
    ]
})
export class SharedModule {

    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule
        };
    }
}

This was the solution and it working perfect! Thanks so much! — Ricardo Daniel, Aug 25 '16 at 10:37

score 0 · Answer 2 · answered Aug 23 '16 at 15:36

0

ng2-translate updated just after the release of RC5. You no longer need to do anything to use the translatePipe globally, it is included in the TranslateModule.

answered Aug 23 '16 at 15:36

Dave V

1,966
9
18

Cool! Do you have an example of integration of ng2-translate with RC5? i found the one on the examples folder of the project, but it only works with the main module. – Ricardo Daniel Aug 23 '16 at 15:39
I've never had it not work in any of my components, so I'm not sure what issue you're running into there. – Dave V Aug 23 '16 at 15:42
do you have an example of integration with rc5? that can be really usefull! thanks so much for your help. Are you using TranslateModule in each component? – Ricardo Daniel Aug 23 '16 at 15:52
https://github.com/ocombe/ng2-translate#usage is all I've done. Which seems to be what you've done. Just make sure you are importing the `TranslateService` in the main module as well. That should open up the pipe application wide. No you don't have to use the Module in each component, you simply have to import it in the `@NgModule()` decorator. For simplicity sake, I added the `.setDefaultLang()` and `.use()` in my main component, so it is set as soon as the application is loaded. – Dave V Aug 23 '16 at 15:57

score 0 · Answer 3 · answered Aug 23 '16 at 15:36

0

Are you initializing TranslateService as in the documentation?

constructor(translate: TranslateService) {
    // this language will be used as a fallback when a translation isn't found in the current language
    translate.setDefaultLang('en');

     // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use('en');
}

Hope this helps!!

answered Aug 23 '16 at 15:36

Madhu Ranjan

17,334
7
60
69

exactly that one yes! – Ricardo Daniel Aug 23 '16 at 15:40
it works for the main module, but not for other shared components – Ricardo Daniel Aug 23 '16 at 15:41

Issue on Angular 2 RC5 with global pipes

{{ 'HOME.TITLE' | translate }}

3 Answers3