Geek Answers Handbook

How to save the selected language in LocalStorage when using Angular-translate?

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

Demand:

I need to create a multilingual application in AngularJS , where the user has the ability to install their language. Therefore, for this I have to download translations from files and save this preferred language in localStorage . Thus, if the user accesses the application again, he will display the previously installed language.

What i have done so far:

Downloaded translations from files using $translateProvider.useStaticFilesLoader

Code:

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

The application works fine if I comment on this line:

 // $translateProvider.useLocalStorage();

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

Console error for the above code.

I also included the angular-translate-storage-local.min.js in my index.html . But failed.

I saw these questions in SO too, but they do not help: Angular localStorage -translate: unknown provider: $ translateLocalStorageProvider

Any immediate help will be very noticeable. Thanks

+6
source share
3 answers

Here's the documentation in the repository with angular translate

What you will soon understand after reading is that the angular-translate-store-local library is for use with the angular-store-translator-cookie . Since local storage is not supported on some older browsers (e.g. IE 7 or lower), angular translate wants to be able to return in order to use cookies when local storage does not do the trick.

The error is caused by angular-translator-storage-local trying to enter the fall back option angular-translate-storage-cookie .

To work around this problem you need to set angular -translate-local-cookie .

Beware that angular -translate-local-cookie tries to add ngCookie , which is the library you will need to install, and also set dependency injection for your application. Injection should be

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

In addition, the incorrect order to include include.html files can also cause problems for you. The correct 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>
+8
source

in my application, I will also comment on $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 func

 $translate.use('fr')

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

0
source

Hey. Try including these two js files in 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>
0
source

More articles:


All Articles