"No provider for TranslateService" error somehow connected to npm install

Question

With my Angular+Webpack+JHipster+yarn project I get the following error. Then I delete node_modules and run 'npm install`, and it goes away. Then I do this and that and it comes back. How come? I'd like to not have to do that. The TranslateService listed in the error is one provided by a library, not one of my own, and is used in three generated components of my project that I did not write.

ERROR Error: No provider for TranslateService!
    at injectionError (vendor.dll.js:1659)
    at noProviderError (vendor.dll.js:1697)
    at ReflectiveInjector_._throwOrNull (vendor.dll.js:3198)
    at ReflectiveInjector_._getByKeyDefault (vendor.dll.js:3237)
    at ReflectiveInjector_._getByKey (vendor.dll.js:3169)
    at ReflectiveInjector_.get (vendor.dll.js:3038)
    at GreatBigExampleApplicationAppModuleInjector.get (ng:///GreatBigExampleApplicationAppModule/module.ngfactory.js:515)
    at GreatBigExampleApplicationAppModuleInjector.getInternal (ng:///GreatBigExampleApplicationAppModule/module.ngfactory.js:2452)
    at GreatBigExampleApplicationAppModuleInjector.NgModuleInjector.get (vendor.dll.js:4005)
    at resolveDep (vendor.dll.js:11467)

Flin

Too late for this but even I started to get this error, did you find any solution to this? @Dan Cancro – Margartmargate

I haven't looked at this project in a while. It doesn't look like I figured it out, but I honestly don't remember how I left it. It was just a toy app. I switched from Angular to React a couple years ago. – Flin

Answer 1

As documented on ngx-translate's github:

You have to import TranslateModule.forRoot() in the root NgModule of your application.

app.module.ts:

@NgModule({
  imports: [
    //...
    TranslateModule.forRoot(),
  ],
  //...
})

Or if you're using a SharedModule:

If you use a SharedModule that you import in multiple other feature modules, you can export the TranslateModule to make sure you don't have to import it in every module

@NgModule({
  exports: [
    //...
    TranslateModule,
  ],
  //...
})

Kisung

Thanks. My app does not have either of these. However I generated a brand new JHipster 4.5.6 app with the same entities and config and it doesn't have these imports either. Yet somehow it works. That makes me think a feature module added since this problem started isn't importing the shared module that mysteriously provides this service, but I've checked and don't see any omissions. I removed the newest feature and that didn't help either. My app was working on master. Then I checked out branch dashboard, got the error, committed, switched back to master and still had the problem. – Flin

It looks like this was part of the solution. Apparently i18n does not yet work on lazy loaded pages in a JHipster app. Changing my page from lazy to eager loading and also adding this to app.module, it seems now to be working albeit without lazy loading. – Flin

Answer 2

I'm not 100% sure what did it, but I deleted yarn.lock, corrected a node version discrepancy, renewed node_modules and it seems to be fixed now. My pom.xml had node 6.11.0 but I had been using 6.10.3 to install packages and run things.

UPDATE: Scratch that. The problem is back again. It started after changing a source file under node_modules/. It remained after reversing the change... after deleting yarn.lock... after deleting target/... after completely reinstalling all node modules... after checking out the master branch. Finally, after all that AND reinstalling all of the node modules, it works again.

I don't know what is going on.

Flin

Answer 3

or you have to export the TranslateModule in the app.module.ts direct without SharedModule like this:

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



@NgModule({
  declarations: [
    AppComponent,
    //..
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    //..
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpTranslateLoader,
        deps: [HttpClient]
      }
    }),
  ],
  exports: [TranslateModule],
  providers: [Title, HttpClient, HttpClientModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

// AOT compilation support
export function httpTranslateLoader(http: HttpClient):any {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

Pants

Answer 4

I ran into this problem and the reason was that (HttpClientModule) was not imported.

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

import { AppRoutingModule } from './app-routing.modu`enter code here`le';
import { AppComponent } from './app.component';
import {  HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      defaultLanguage : 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: httpTranslateLoader,
        deps: [HttpClient]
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


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

Taproom

thanks, broo I read your helpful comment and modified my answer and added what was causing my problem – Taproom