.forRoot() usage with lazy loading routes with child components

[ogakoto2]

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

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

Current behavior

ngx-translate does not work in components in shared module under lazy loading

Like the structure above,
translate pipe works on all Components H1, H2, E1, E2, O1, O2,
but none for Components S1, S2

The error would show as below:

Expected/desired behavior

ngx-translate should work in all components.

Reproduction of the problem

https://stackblitz.com/edit/angular-pfa8dc

What is the expected behavior?

All Root Components should work with translate pipe
{{'id'| translate}}

What is the motivation / use case for changing the behavior?

Be able to use messageformat's pluralization feature combined with lazy-loading translation.

Please tell us about your environment:

@ngx-translate/core: "^11.0.1",
@ngx-translate/http-loader: "^4.0.0",
@angular/cli: "~7.1.4",

• Browser: [all XX | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[kopach]

Duplicate. See here for more details.