6

I am new to angular-translate in my Angular app.

Requirement :

I have to create a multi language application in AngularJS where user has an option to set his language. So, for that I have to load translations from files and save that preferred language in localStorage. So that if the user comes again to access the application he will be displayed the previously set language.

What i have done so far :

Loaded translations from files by using $translateProvider.useStaticFilesLoader

Code :

var app = angular.module("myLangApp", ['pascalprecht.translate'])
app.config(function($translateProvider) {
$translateProvider.useStaticFilesLoader({
        prefix: 'languages/',
        suffix: '.json'
      });
    $translateProvider.useLocalStorage();
});

Application works fine if I comment this line: 

// $translateProvider.useLocalStorage();

But if I use it, I am getting this error on the console:

Console error for the above code.

I have also included the angular-translate-storage-local.min.js file in my index.html.But no success.

I have also seen these questions in SO, but they don't help: Angular-translate's localStorage: Unknown provider: $translateLocalStorageProvider

Any immediate help will be highly appreciable. Thanks

Community
  • 1
  • 1
Debug Diva
  • 26,058
  • 13
  • 70
  • 123
  • 1
    Possible duplicate of [Angular-translate's localStorage: Unknown provider: $translateLocalStorageProvider](http://stackoverflow.com/questions/30287185/angular-translates-localstorage-unknown-provider-translatelocalstorageprovid) – Aks Oct 06 '15 at 06:53
  • Also include this: https://github.com/angular-translate/bower-angular-translate-storage-cookie – Aks Oct 06 '15 at 06:56
  • I think this might help you. http://stackoverflow.com/questions/22364503/angular-translateprovider-issue-with-uselocalstorage – Sourabh Agrawal Oct 06 '15 at 07:25

3 Answers3

8

Here's the documentation on storage with angular translate

What you'll soon realize after reading it is that the angular-translate-storage-local library is meant to be used together with the angular-translate-storage-cookie library. Since local storage is not supported on some of the older browsers (example : IE 7 or below), angular translate want to have a fall back option to use cookies when local storage won't do the trick.

The error is caused by angular-translate-storage-local trying to inject its fall back option angular-translate-storage-cookie.

To circumvent this problem, you'll want to install angular-translate-local-cookie.

Beware that angular-translate-local-cookie tries to inject ngCookie which is a library that you'll have to install as well as set the dependency injection for your app. Injection should be 

var app = angular.module('myApp', ['ngCookies', 'pascalprecht.translate']);

Also, the wrong ordering of the include files in your index.html can also cause problems for you. The proper order should be 

<script type="text/javascript" src="vendor/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="vendor/angular-translate-storage-cookie/angular-translate-storage-cookie.min.js"></script>
<script type="text/javascript" src="vendor/angular-translate-storage-local/angular-translate-storage-local.min.js"></script>
Diego87
  • 1,617
  • 3
  • 17
  • 20
Jun Duan
  • 218
  • 1
  • 9
0

in my app I also comment $translateProvider.useLocalStorage(); but I added 

$translateProvider.preferredLanguage('en');
$translateProvider.useStaticFilesLoader({
  prefix: 'languages/',
  suffix: '.json'
});

I have different json files, one for each lang, and with the func 

$translate.use('fr')

I change the ui language every time that the user change the lang I save it in the local storage and use it on startUp inside the $translate.use

David
  • 633
  • 8
  • 6
  • I agree with you. But my question is different.I want to save the user language in the local storage. so that if user comes again on the app there is no need to select the language again. – Debug Diva Oct 06 '15 at 11:04
  • the '$translateProvider.preferredLanguage('en')' set the default lang, – David Oct 06 '15 at 11:14
  • the '$translateProvider.preferredLanguage('en')' set the default lang, you can build a startUp func that will check if there's a saved lang value in the localStorage and will apply it using: '$translate.use(window.localStorage.getItem('CLIENT_LANG'))' and in another function when the user will decide to change the ui lang you will build: 'changeLang(langKey){ $translate.use("" + langKey); window.localStorage.setItem('CLIENT_LANG',langKey); }' – David Oct 06 '15 at 11:21
0

Hello Try to include these two js files into your index page

  • angular-translate-storage-local.js
  • angular-translate-storage-cookie.js

or(if you use Bower)

<script src="bower_components/angular-translate-storage-local/angular-translate-storage-local.js"></script>
<script src="bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
CaptainNemo
  • 121
  • 3