Rohit Jindal Rohit Jindal - 4 months ago 41
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

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

Answer

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>