How to import module to child module?

user_9226186 0
Viewed 4523

I'm using ngx-translate in my Angular application. I'm import and done everything in app.module.ts:

import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
 }

@NgModule({
imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    })
],
bootstrap: [AppComponent]

@NgModule({
imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    })
],
bootstrap: [AppComponent]

I'm import and export modules like in example on github ngx-translate page. Translator works fine.

But I have subfolder which has his own module.ts file, pages.module.ts. When I want to using ngx-translate on html file in pages folder, i have information, that translate pipe is not recognize in this app. I think I need to import elements from app.module.ts to pages.module.ts. I tried, but i don't know how to do it.

ngx-translate angular
2 Answers

Most likely you have to use TranslateModule.forChild (instead of TranslateModule.forRoot) in child module pages.module.ts.

In the child module use "extend" = true to get the settings from the root module

TranslateModule.forChild({
  extend: true
})
user_81315790

Create a shared module file (shared.module.ts)

import {HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
 }

@NgModule({
imports: [
TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
    }
})
], export: [TranslateModule]

Then import the shared module into any other module you want to use the Translate service in.

user_62723250
Related