Ionic-framework: Ionic2 Pipes is not working in modal

[vinothyada]

Short description of the problem:

I have created modal using given below format

Beta 10 code

let demo = Modal.create(DemoPage, { ID: id });
 this.nav.present(demo);

if i present modal window like this TranslatePipe is working

but this same code is not working in beta 11

Beta 11

let demo = this.modalCtrl.create(DemoPage, { ID: id}); 
demo.present();

Js code :

import {TranslatePipe} from "ng2-translate/ng2-translate";
@Component({
    templateUrl: "build/pages/demo/demo.html",
    providers: [[DemoService]],
    pipes: [TranslatePipe],
    queries: {
        content: new ViewChild(Content)
    }
})

export class DemoPage {
}

HTML

 <ion-title>{{ 'Demo.title' | translate}}</ion-title>

*_Which Ionic Version? *_
ionic 2 beta 11

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.33
Ionic App Lib Version: 2.0.0-beta.19
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.5 LTS
Node Version: v4.4.7

[szerner]

I think this could be an issue not special for modals but for all overlays (see issue #7592). You could try the following in your app.ts (excerpt):

import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
...
ionicBootstrap(MyApp, [
    {   provide: PLATFORM_PIPES,
        useValue: TranslatePipe,
        multi: true},
    {
        provide: TranslateLoader,
        useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
        deps: [Http]
    },
    TranslateService
    ], { }
);

Then in your modal you should omit the pipes: [TranslatePipe] statement of the @component decorator.

This works for my translations in v2 beta 11.

[vinothyada]

Other pages its working only modal page not working for me

my app.js file

import {TranslateService, TranslateLoader, TranslateStaticLoader, TranslatePipe} from "ng2-translate/ng2-translate";

@Component({
templateUrl: "build/app.html",
providers: [
provide(TranslateLoader, {
useFactory: (Http) => new TranslateStaticLoader(Http, "assets/i18n", ".json"),
deps: [Http]
}),
TranslateService
],
pipes: [TranslatePipe],
queries: {
nav: new ViewChild("content")
},
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})

ionicBootstrap(MyApp, [provide(TranslateLoader, {useFactory: (Http) => new TranslateStaticLoader(Http, "assets/i18n", ".json"), deps: [Http] }), TranslateService]);

[vinothyada]

Is this quick fix or permanent fix @szerner

[szerner]

For me it was necessary to move my providers from the providers section of the decorator to ionicBootstrap since beta 11. Don't know whether this is only temporary. Does it work now for you?
I think you should delete provider:... and pipes:... from your @component now.
EDIT:
include the provide: PLATFORM_PIPES...section in your ionicBootstrap dependecies (see my first answer), so you can omit thepipes:... section in your page and modal components.

[vinothyada]

Thanks man its working now @szerner

[davorpeic]

Thanks, also solved my issue with translations in beta.11 :)

[bibitoo]

I have got this problem now.
Since PLATFORM_PIPES has been deprecated, in RC6, How should I do?

[gabriel-anglada]

@bibitoo I am also stacked with this... Any solutions?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.