"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)

Too late for this but even I started to get this error, did you find any solution to this? @Dan Cancro — Anna, Jul 24 '20 at 11:16
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. — Dan Cancro, Jul 25 '20 at 22:53

score 34 · Accepted Answer · answered Jun 26 '17 at 15:34

34

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,
  ],
  //...
})

answered Jun 26 '17 at 15:34

developer033

24,267
8
82
108

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. – Dan Cancro Jun 26 '17 at 17:03
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](http://localhost:9010/#/features/dashboard) albeit without lazy loading. – Dan Cancro Jul 04 '17 at 16:37

Dan Cancro · Answer 2 · 2017-06-30T04:05:24.713

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.

score 0 · Answer 3 · answered Jan 09 '21 at 22:16

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');
}

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

3 Answers3