Rohit Jindal Rohit Jindal - 1 year ago 188
AngularJS Question

LocalStorage : Angular-translate

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

Requirement :

I have to create a multi language application in

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

Code :

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

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
file in my
.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

Answer Source

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 ngCookies which is a library that you'll have to install as well as set the dependency injection for your app. Injection should be

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download