Angular Translate - Using StaticFilesLoader for Fallback Language

In my Angular Translate v2.0.0 projects, I have created three language files: "en.json", "en-US.json", and "en-EU.json" loaded via StaticFilesLoader. I want the translations to fallback to "en.json" if the key doesn't exist in the specific "en-*" file. This works when defining translations with $translateProvider.translations(), but I need to load static files.

Here is an example of the code:

/i18n/en.json

{ "sidebar": { "HEADING": "I AM HEADING" }}

/i18n/en-US.json

{ "formats": { "date": "MM/DD/YYYY" }}

/i18n/en-EU.json

{ "formats": { "date": "DD/MM/YYYY" }}

In the configuration, I use:

 // Register a loader for the static files
$translateProvider.useStaticFilesLoader({
    prefix: 'i18n/',
    suffix: '.json'
});

$translateProvider.preferredLanguage('en-US');

$translateProvider.fallbackLanguage('en');

$translateProvider.useCookieStorage();

$translateProvider.useSanitizeValueStrategy('sanitize');

$translateProvider.useMissingTranslationHandlerLog();

When the application loads, only "formats.date" renders and the error states that "sidebar.HEADING" does not exist.

Answer №1

After some research, I discovered that achieving my desired goal would require the use of a CustomLoader or similar solution. That led me to incorporate https://github.com/RobbinHabermehl/gulp-angular-translate into one of my build steps. This approach actually turned out to be better since it allows for the immediate loading of the language instead of asynchronously.

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

Extracting the URL of the @font-face declaration in CSS with the use of JavaScript

Currently, my CSS file contains numerous @font-face tags. Each tag specifies a unique font-family and src URL. @font-face{ font-family: Garamond; src: url('ePrintFonts/pcl_91545.ttf'); } @font-face{ font-family: C ...

Utilize a variable within a regular expression

Can the variable label be used inside a regex like this? const label = 'test' If I have the regex: { name: /test/i } Is it possible to use the variable label inside the regex, in the following way? { name: `/${label}/i` } What do you think? ...

Difficulty with the width of the HTML5 video player frame

My website features multiple user-submitted videos with different content, resulting in varying frame widths and heights. For instance: (Video 1) - Frame width: 1280. (Video 2) - Frame width: 480. Frame height: 360. The issue arises when a video with a ...

Ways to pass the ng-repeat index from one ng-repeat to another

I am working with an array named "Menu" var Menu = [ "url" : "#", "type" : "F", "id" : "F00001", "name" : "CUST", "child" : [ { "type" : "P", "id" : "C00001", "name" : "CUST INFO" ...

Is it possible to adjust the code for fs.readFileSync(__dirname + '/index.html);?

Is it possible to change the code from fs.readFileSync(__dirname + '/game.php'); to fs.readFileSync(__dirname + '/game.php?id='+id);? I encountered an error while trying to do so: fs.js:549 return binding.open(pathModule._makeLong( ...

Transform a JSON object string into a usable value

I'm currently working on a function that takes a string, splits it, and then formats it using json[key][key2][key3]. The issue is that 'n' could potentially be infinite (not literally but needs to be written as such) function getJsonValue(j ...

The node is patiently anticipating a timeout that has already been thwarted

I implemented a timeout to handle errors. The issue arises when I try to clear the timeout using clearTimeOut(). Even though the value of errTimeout's _kill indicates it has been successfully killed, for some reason, the script continues running in No ...

Guide on utilizing personalized fonts with Handlebars and Puppeteer

I have a Handlebar template that I am converting to PDF using Puppeteer. My question is how can I incorporate custom fonts? Currently, I have a static folder declared in my app.js file like this: app.use(express.static(path.join(__dirname, 'assets&ap ...

Is there a tutorial for JavaScript with Selenium WebDriver?

I've recently embarked on the journey of writing tests with Selenium WebDriver and JavaScript. However, I'm facing a roadblock in finding a comprehensive tutorial that covers element locators, commands, verification commands for elements, clickin ...

Passing parameters through the URL with Angular's ui-router

Instead of passing parameters when changing pages like this: $state.go('index.my_route', {my_param : value}); Is it possible to pass the parameter in the URL string while still using $state.go? For example: $state.go('index.my_route?my_pa ...

Instructions on how to showcase a standard text within a designated text container

I am currently facing an issue with a textarea or textbox that is dynamically receiving URLs from a database. The textbox is displaying the full URL address, which is not visually appealing. I would like to replace this with some generic text such as "cl ...

transmitting user data to specified div container

Hey there, I have a question about sending user input to a div section in an HTML document. I've asked this before, but now I'm trying to be more specific. I'm having trouble getting the user input to display below each other in the div whe ...

Stop phonegap from altering the default orientation on the device

As a newcomer to phonegap, I am seeking a reliable and straightforward way to determine whether a device is a tablet or a phone. My current method involves comparing the width and height sizes of the screen - if the width is greater, then it is a tablet; o ...

The component is unable to retrieve the state stored within the store

I've encountered an issue with my Array component not being able to access the state "count" stored in a Redux store. I've double-checked that the store is connected and it appears in the React dev tools. The Array component is supposed to take t ...

Trouble navigating cursor position on ngModelChange in Angular/Typescript

I'm currently facing an issue with my HTML input field combined with a typescript component utilizing ngModelChange. I am aiming to have the flexibility to edit the input value wherever necessary. Let's consider this scenario: The original inpu ...

docker throwing error due to missing webpack configuration file

I've encountered an issue while trying to run my web app using webpack and docker. It works fine when I run "npm start" but not when I run it with docker. Below are the errors that I am facing: > webpack-dev-server --open --progress --config webpa ...

Altering the innerHTML of a <p> tag with a smooth transition

I am a beginner in the world of web design. I am currently working on a project where I need to continuously change the text inside a <p> element with a transition effect similar to a slideshow. Below is the code I have so far: <p id="qu">S ...

What other intentions am I forgetting?

Encountering an error regarding missing intents but unable to determine which intents are missing. Various attempts have been made to rectify the issue without success. What specific element is absent here? The following code snippet represents only a po ...

Utilize AngularJS to generate JSON output instead of traditional HTML rendering

Looking to create a basic application that involves html pages along with an api for performing calculations using JavaScript. I need to display JSON output from my controller instead of rendering an HTML file. Any suggestions on how to achieve this using ...

Getting Anchor Javascript to Submit in Internet Explorer. Functioning in Firefox, Chrome, and Safari

Greetings Stackoverflow enthusiasts, I have been working on a raffle form where users can input their name and select their location from a dropdown list. After filling out the form, they can click submit and their information will be stored in a database ...