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

Dan Cancro picture Dan Cancro · Jun 26, 2017 · Viewed 8.3k times · Source

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)

Answer

developer033 picture developer033 · Jun 26, 2017

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