Ngx-translate NullInjectorError: No provider for Injector!

Ionic Framework
1

Hi, I am trying to import the utility module from another ionic app to my current one. The utils module has TranslateModule as well. In Utils module. Below are my code:

Utils Module (from another app)

import { NgModule, ModuleWithProviders } from '@angular/core';
import { NetworkService } from './network-service';
import { Network } from '@ionic-native/network/ngx';
import { HttpClientModule, HttpClient } from '@angular/common/http';

import { TranslateModule, TranslateLoader, TranslateStore } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslationService } from './translate-service';
import { CommonModule } from '@angular/common';

export function initTranslateLoader(http: HttpClient) {
  console.log("load new files-----");
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
  imports: [
    CommonModule,
   HttpClientModule,
    TranslateModule.forChild({loader: {provide: TranslateLoader, useFactory: (initTranslateLoader), deps: [HttpClient]}, isolate:true}),
  ],
  declarations: [],
  exports: [TranslateModule],
  providers: [Network, NetworkService, TranslationService,TranslateStore]
})
export class UtilsModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: UtilsModule,
      providers: [Network, NetworkService, TranslationService,TranslateStore]
    }
  }
}

My current app module ts file is (in which utils module is imported)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader, TranslateService, TranslateModuleConfig, TranslateStore } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { UtilsModule } from '../../../css-mobile-ionic-lib/src/utils/module';
import { Utils } from '../../../css-mobile-ionic-lib/src/utils/index';

export function initTranslateLoader(http: HttpClient) {
  console.log("load new files---***********************************************************--");
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    HttpClientModule,
    UtilsModule, 
    TranslateModule.forRoot({
      loader: {provide: TranslateLoader, useFactory: (initTranslateLoader), deps: [HttpClient]}, isolate:true
    }),
    IonicModule.forRoot(), AppRoutingModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    Utils
  ],
  bootstrap: [AppComponent]
})

export class AppModule { 
  
}

When i do ionic serve in current app, i get following error:

13%20PM
Screenshot 2019-05-08 at 5.10.13 PM.png2128×800 199 KB

Can anyone help me out with my issue??