"Cannot read property getTranslation of undefined" error when importing Translation module to components

[sharonswli]

I'm submitting a ... (check one with "x")

[X] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior I'm working on an Ionic 3.5 app with lazy loaded pages, and am trying to incorporate the ngx-translate library to support multi-lingual versions of our app. By following the docs, I created a translation-service.module.ts to be imported to various lazy-loaded pages of my app, and I'm able to get the translate pipe working on all pages components (Example: the 'Dashboard' component in the plnkr below).

This is my translation-service.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Http } from "@angular/http";
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { createTranslateLoader } from '../../app/app.module';

@NgModule({
  imports: [
    CommonModule,
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ],
  exports: [
    CommonModule,
    TranslateModule
  ]
})
export class TranslationServiceModule {}

Now I wanted to inject the same TranslateService into my custom components in src/components, but as soon as I imported the TranslationServiceModuleI created into my InputFormModule, I get a "Type Error: Cannot read property getTranslation of undefined" error on ionic serve (see screenshot below)

So far the only difference I see between my InputFormComponent and Dashboard is that since the Dashboard Component is meant to be lazily-served as a page, it has the @IonicPage decorator. And the fact that I'm importing my InputFormComponent through CustomComponent.module.ts to app.module.ts as a bundler of other components that needs to be imported. My InputFormComponent is a child component in various FormXPartX components which are NOT lazy-loaded like Dashboard, as you can see in the plnkr below they are bundled by FormListModule and imported to app.module.ts.

Expected/desired behavior Importing the TranslationServiceModule should work on both lazy-loaded @IonicPage components and non-lazy loaded children components

Reproduction of the problem *Note: Clicking 'Run' on the plnkr won't work. The plnkr is just used to show the relevant files I used in my app http://plnkr.co/edit/9aPqg5Zbfy3RCipxn2dl

Environment:

• ngx-translate version: @ngx-translate/core": "7.0.0" @ngx-translate/http-loader": "0.1.0"

• Angular version: 4.1.3

• Ionic version: 3.5.0

• Browser:all

[picninim]

Same here for version 4.3.3

[picninim]

It only happens when using production: true for Environment.

[shigurenimo]

+1