Core: not working in angular5

Created on 19 Nov 2017 · 8Comments · Source: ngx-translate/core

Hi,
ngx-translate was working fine with angular4 in shared module. I mean, if i change language in one place, it got affected through out the entire app. But after upgrading to angular5, its not working now.

I'm getting this error...

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[TranslateStore]: 
  StaticInjectorError[TranslateStore]: 
    NullInjectorError: No provider for TranslateStore!
Error: StaticInjectorError[TranslateStore]: 
  StaticInjectorError[TranslateStore]: 
    NullInjectorError: No provider for TranslateStore!
    at _NullInjector.get (core.js:923)
    at resolveToken (core.js:1211)
    at tryResolveToken (core.js:1153)
    at StaticInjector.get (core.js:1024)
    at resolveToken (core.js:1211)
    at tryResolveToken (core.js:1153)
    at StaticInjector.get (core.js:1024)
    at resolveNgModuleDep (core.js:10585)
    at _createClass (core.js:10630)
    at _createProviderInstance$1 (core.js:10596)
    at _NullInjector.get (core.js:923)
    at resolveToken (core.js:1211)
    at tryResolveToken (core.js:1153)
    at StaticInjector.get (core.js:1024)
    at resolveToken (core.js:1211)
    at tryResolveToken (core.js:1153)
    at StaticInjector.get (core.js:1024)
    at resolveNgModuleDep (core.js:10585)
    at _createClass (core.js:10630)
    at _createProviderInstance$1 (core.js:10596)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4620)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at ZoneTask.invokeTask (zone.js:503)
    at ZoneTask.invoke (zone.js:488)

please help me to fix this issue.

ngx-translate version I'm using is 8.

Source

nasr18

👍4

Most helpful comment

My solution

import {HttpClient, HttpClientModule} from '@angular/common/http';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

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

Just add HttpClientModule to your imports

mnill on 24 Nov 2017

👍4 👎1

All 8 comments

You have to change the http to httpclient in your app.module.ts :

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http)
}

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

Lakston on 20 Nov 2017

I got the same issue since Im trying to create an external module which uses translation for template. Some of the pipes and service cannot be found.

dkabul on 23 Nov 2017

My solution

import {HttpClient, HttpClientModule} from '@angular/common/http';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

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

Just add HttpClientModule to your imports

mnill on 24 Nov 2017

👍4 👎1

I din't do anything. But when i opened my lap next day, it works fine just like it worked on angular4. Don't know why it didn't worked on first day. I'm closing this issue.

nasr18 on 25 Nov 2017

I still have the same issue and I'm very stuck on it... Has anyone any new about that? Great thanks in advance