angularnpmwebpackjhipsteryarnpkg

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


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)

Solution

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