The eccentricities of Angular Translate in Firefox and Safari

While everything functions correctly in Chrome, there seems to be an issue with changing the language in Safari and Firefox.

angular.module('angularApp')
.config(['$translateProvider', function ($translateProvider) {
    $translateProvider.usePostCompiling(true)
    .useStaticFilesLoader({
        prefix: 'i18n/locale-',
        suffix: '.json'
    })
    .registerAvailableLanguageKeys(['de','en'],{
        'de_DE': 'de',
        'en-*': 'en'
    })
    .preferredLanguage('de')
    .determinePreferredLanguage()
    .fallbackLanguage('de');
}]);

In my Controller, I have implemented code to change the language. This works smoothly in Chrome, but encounters issues in Safari and Firefox without any error messages or console output...

  .controller('NavbarCtrl', function ($scope, $translate) {


    $scope.changeLanguage = function (langKey) {
      $translate.use(langKey).catch(function (err) {
        $translate.use($translate.fallbackLanguage());
      });
    };


  });

///// UPDATE Interestingly, I encounter a similar problem in Chrome when switching the language to English. It appears that the request to load locale-de.json is being cancelled for some reason. https://i.stack.imgur.com/PYcCv.png

javascriptangularjsfirefoxsafariangular-translate

Answer №1

After a thorough investigation, I have identified the root cause of the unusual behavior. By reordering the settings loaded by $translateProvider and adjusting the fallback language, the issue has been resolved:

.config(['$translateProvider', function ($translateProvider) {
    $translateProvider

    .useStaticFilesLoader({
        prefix: 'i18n/locale-',
        suffix: '.json'
    })
    .registerAvailableLanguageKeys(['fr','es'],{
        'fr_FR': 'fr',
        'es_*': 'es'
    })
    .determinePreferredLanguage()
    .fallbackLanguage('fr_FR')
    .useSanitizeValueStrategy(null)

}]);

As a result, the previous problem with canceled requests no longer persists.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble implementing array filter in React component is a common issue

Hello everyone! I'm facing an issue with deleting an element from my useState array. I have the index of the element that I want to remove, and I've tried the following code snippet: const updatedArray = myArray.filter((item: any, index: number) ...

javascriptreactjsarraystypescriptnext.js

Discovering all class names following the same naming convention and storing them in an array through Javascript

Hey everyone, I could use some assistance with a coding challenge. I'm aiming to extract all class names from the DOM that share a common naming convention and store them in an array. For instance: <div class="userName_342">John</div> & ...

javascripthtml

Angular and AngularJS directives work together to indicate events on a line chart

Currently, I am creating a dashboard using AngularJS along with Angularjs-nvd3-directives, mainly focusing on line charts. I am interested in adding markers to the chart for specific events. For instance, if I have a time series data, I want to be able to ...

javascriptangularjsnvd3.js

Issue with printing JavaScript value using Selenium_ASSUME_WE_NOT have any changes in the content

I'm currently running tests with Selenium and Java. I've experienced success in printing the pages' HTML from JavaScript by using an alert: js.executeScript("alert($('html').html());"); However, when trying to use return, nothing ...

javajavascriptselenium

When attempting to navigate to a different page in Next.js, the Cypress visit functionality may not function as

In my upcoming application, there are two main pages: Login and Cars. On the Cars page, users can click on a specific car to view more details about it. The URL format is as follows: /cars for the general cars page and /cars/car-id for the individual car p ...

javascriptnext.jscypress

Filter an array of objects based on a provided array

I have an array of objects that I need to filter based on their statuses. const data = [ { id:1, name:"data1", status: { open:1, closed:1, hold:0, block:1 } }, { id:2, name:"data2", ...

javascriptarraysobjectfilter

Understanding Restangular with Typescript can be challenging, especially when dealing with a 'restangularized' response object

In my project, I am working with Angular 1.5.x using TypeScript in combination with restangular to access a remote API. Here is an overview of the scenario: The API endpoint I am connecting to is http://localhost:53384/api/timezones. Making a GET request ...

angularjstypescriptangular-promiserestangulartsd

Is it possible to identify horizontal scrolling without causing a reflow in the browser?

If you need to detect a browser scroll event on a specific element, you can use the following code: element.addEventListener('scroll', function (event) { // perform desired actions }); In order to distinguish between vertical and horizontal ...

javascripthtmlreflow

What is the best way to send additional data with getServerSideProps() in Next.js?

Not sure if this is a silly question, but I am currently working with a Django API and attempting to implement pagination on the search page using Next.js. As a newbie to Next.js, I have scoured the web for a solution but haven't found anything helpfu ...

javascriptwebnext.js

send json data using $resource to interact with an mvc controller and get json responses

Check out my AngularJs code: var adminApp = angular.module('adminApp', ['ngResource']); adminApp.controller('adminCtrl', function ($scope, AdminService) { AdminService.getRoles().$promise.then(function (rolesData) { ...

c#angularjsjsonasp.net-mvc-5

Remove image files from a directory with jQuery without relying on PHP or AJAX

Did you know that JQuery code is capable of executing unlink operations like PHP without using AJAX or a PHP file? For instance, if you wish to delete or unlink the file "aaa.jpg" located in the folder www.myproject.com/images/, you can achieve this by s ...

javascriptphpjqueryajaxlaravel

Is there a way to turn off TypeScript Inference for imported JavaScript Modules? (Or set it to always infer type as any)

As I attempt to utilize a JS module within a TypeScript File, I encounter errors due to the absence of type declarations in the JS module. The root cause lies in a default argument within the imported JS function that TypeScript erroneously interprets as ...

javascriptreactjstypescripttype-inference

Tips for automatically closing the Toggle Navigation feature in Vue JS when a user clicks outside of the navigation container

Is there a way to close the toggled navigation menu automatically when the user clicks outside of the navigation container? I have implemented two ul menus inside the navigation menu and would like the subNavActive, safNavAcitve, and repNavUl variables to ...

javascriptvue.jsvuejs2vue-component

How require works in Node.js

My current database connection module looks like this: var mongodb = require("mongodb"); var client = mongodb.MongoClient; client.connect('mongodb://host:port/dbname', { auto_reconnect: true }, function(err, db) { if (err) { ...

javascriptnode.jsmongodbexpress

Converting an array of object values to an Interface type in Typescript

In my JSON document, I have an array named dealers that consists of various dealer objects like the examples below: "dealers" : [ { "name" : "BMW Dealer", "country" : "Belgium", "code" : "123" }, { "name" : ...

javascripttypescript

Utilize JavaScript to create a toggle menu feature that can target multiple variables with just one click function

I am attempting to create a collapsing menu on click functionality with additional modifications. One of the changes I would like to implement is altering the background of another element when the menu collapses. Currently, the code snippet only works fo ...

javascripthtmlcss

Persistent error function arises from Ajax request in Laravel

Greetings everyone. I'm currently working on my Laravel application and trying to verify the attendance for a specific date, subject, grade in my database table. If the data exists, I have implemented an if statement to display the desired results bas ...

javascriptphpjqueryajaxlaravel

What is the best way to include a JavaScript variable within CSS styling?

I am currently implementing a dropdown menu system where the image of a parent div changes on mouse hover over a link, and reverts back when the mouse moves away. I have this functionality set up using a variable in my HTML code. Is there a way for me to m ...

javascripthtmlcss

Unable to modify attribute within $templateCache through an AngularJS Directive

Here is my Directive code: module.directive('iconSwitcher', function() { return { restrict : 'A', link : function(scope, elem, attrs) { var currentState = true; elem.on('click', function() { ...

javascriptjqueryangularjsangularjs-directiveangular-directive

Node.js: Extracting parameters from the URL

When working with Rails, I make a POST request to my server: response = Typhoeus::Request.post("http://url.localtunnel.com/request?from=ola&to=ole") result = JSON.parse(response.body) Now in my Node.js application, I need to retrieve values for From ...

javascriptnode.jscoffeescript