I’ve since switched to Ionic 4 and found a good clean solution.
I’ll try to sum it up:
npm install your packages. In my package.json I currently have:
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
In app.module.ts, I have (essentially):
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {RouterModule, RouteReuseStrategy, Routes} from '@angular/router';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {ComponentsModule} from './components/components.module';
import {PlayerPickerPage} from "./modal/player-picker/player-picker.page";
import {NotifPromptPage} from "./modal/notif-prompt/notif-prompt.page";
import {OkMessagePage} from "./modal/ok-message/ok-message.page";
import {SingleSelectPage} from "./modal/single-select/single-select.page";
import {PlayerPickerPageModule} from "./modal/player-picker/player-picker.module";
import {NotifPromptPageModule} from "./modal/notif-prompt/notif-prompt.module";
import {OkMessagePageModule} from "./modal/ok-message/ok-message.module";
import {SingleSelectPageModule} from "./modal/single-select/single-select.module";
// excluded some other imports not relevant to our conversation
@NgModule({
declarations: [AppComponent],
entryComponents: [
PlayerPickerPage, // Pages I intend to use with popoverController
NotifPromptPage,
OkMessagePage,
SingleSelectPage
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
ComponentsModule, // my shared components module
IonicModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (HttpLoaderFactory),
deps: [HttpClient]
}
}),
IonicStorageModule.forRoot(),
PlayerPickerPageModule, // Modules of pages I intend to use with popoverController
NotifPromptPageModule,
OkMessagePageModule,
SingleSelectPageModule
],
exports: [],
providers: [
StatusBar,
SplashScreen,
Device,
OneSignal,
InAppBrowser,
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [AppComponent]
})
export class AppModule {
}
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
Then I created a module called src/shared/shared.module.ts and this is the only place where I import the translate modules.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
@NgModule({
imports: [
CommonModule
],
declarations: [],
exports: [
TranslateModule
]
})
export class SharedModule { }
Then in any page I need to have the translate pipe working, I simply go in that page’s module.ts and import my Shared Module: for example in my login page
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { SharedModule } from '../../shared/shared.module'; // allows use of translate pipe
import { LoginPage } from './login.page';
const routes: Routes = [
{
path: '',
component: LoginPage
}
];
@NgModule({
imports: [
CommonModule,
SharedModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [LoginPage]
})
export class LoginPageModule {}
The tricky part was to get the translate pipe working in common components. Here goes. To create a new component, create an app/components folder and, in that folder, create components.module.ts. This module will import in ever new component you create. So if you create:
// notice that I specified I want to create it in the "components" folder.
ionic generate component components/MyHeader
(I think that if you simply do the ionic generate component step in a subfolder, it might create the common module automatically.)
Now go look in your components.module.ts and it should have automatically added your components to the declarations. Now to get the translate pipe to work in all these components (since they don’t have a module.ts of their own), import the SharedModule into your components.module.ts. The final result looks like this:
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {IonicModule} from '@ionic/angular';
import {SharedModule} from '../shared/shared.module';
import {TreeNodeComponent} from "./tree-node/tree-node.component";
import {MyHeaderComponent} from './my-header/my-header.component';
@NgModule({
imports: [
CommonModule,
IonicModule,
SharedModule, // imports translate modules
],
declarations: [
TreeNodeComponent,
MyHeaderComponent
],
exports: [
TreeNodeComponent,
MyHeaderComponent
],
entryComponents: []
})
export class ComponentsModule {
}
MyHeader should now work with translate pipes. I was already using a component called TreeNodeComponent and the translate pipe works in it.