Angular-translate's localStorage: Unknown provider: $translateLocalStorageProvider

Question

I'm using angular-translate in my Angular (v1.x) app as well as loading translations from files by using $translateProvider.useStaticFilesLoader

angular.module('myApp',['pascalprecht.translate'])

.config(function($translateProvider) {

     $translateProvider.useStaticFilesLoader(
          prefix: window.location.pathname.replace(/[\\\/][^\\\/]*$/, '') + '/__languages/',  // absolute path + language path
          suffix: '.json'
     });

     // $translateProvider.useLocalStorage();
}

Angular-translate works perfectly but when it comes to use:

  $translateProvider.useLocalStorage();

(commented in the code above) as proposed in this guide, I get the following error:

Uncaught Error: [$injector:unpr] Unknown provider: $translateLocalStorageProvider <- $translateLocalStorage <- $translate

Of course I included all the the needed js files:

<script src="bower_components/angular-translate/angular-translate.min.js"></script>
<script src="bower_components/angular-translate-loader-url/angular-translate-loader-url.min.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>

I even tried to:

• add 'angular-translate-storage-local' as a dependency in app.JS
• add $translateUrlLoader, $translateStaticFilesLoader in the .config block.

Answer 1

You don't have to add angular-translate-storage-local as dependency to your app.js file.

I think that you just forgot to include angular-translate-storage-local package in your html:

 <script src="bower_components/angular-translate-storage-local/angular-translate-storage-local.min.js"></script>

Link to github.