Efficient Multi-Language Localization in Widget JS Without Multiple API Calls #10471

6 Answer(s)

• 

  0

  AI-Bot created 17 hours ago

  Support Team ABP Agent

  • In ABP MVC, abp.localization.getResource("QueuingSystem") (and abp.localization.localize(...)) always localizes using the current UI culture that was loaded into the page. It is not designed to return strings for an arbitrary culture (e.g., "en", "ar", "hi") on the fly.

  • If you need to show multiple languages at the same time in one page/widget, the efficient/ABP-native way is:

    1. Load the localization dictionary once per culture (one request per culture), cache it in JS memory.
    2. Implement localizeText(key, culture) to read from that cache (no further server calls).

  1) Solution

  A. Preload the localization script for each culture once (parallel) ABP exposes a JS endpoint that returns localization texts for a given culture (used by the framework itself). You can load it dynamically:

  // resourceName: "QueuingSystem"
  const resourceName = "QueuingSystem";
  
  // culture -> { resourceName -> { key -> value } }
  const localizationCache = {}; 
  
  function loadCultureLocalization(cultureName) {
    // If already loaded, reuse.
    if (localizationCache[cultureName]) {
      return Promise.resolve();
    }
  
    // This endpoint returns a JS script that populates ABP's localization store.
    const url = `/Abp/ApplicationLocalizationScript?cultureName=${encodeURIComponent(cultureName)}`;
  
    return new Promise((resolve, reject) => {
      const s = document.createElement("script");
      s.src = url;
      s.onload = () => {
        // After script loads, ABP's JS localization store knows that culture's texts
        // (internals). We just mark it loaded to avoid re-loading.
        localizationCache[cultureName] = true;
        resolve();
      };
      s.onerror = reject;
      document.head.appendChild(s);
    });
  }
  

  B. Localize without extra calls After you’ve loaded a culture’s localization script, you can switch ABP’s culture temporarily, read the text, then switch back (so you can obtain multiple cultures’ values without additional requests):

  async function localizeText(key, cultureName) {
    await loadCultureLocalization(cultureName);
  
    const previousCulture = abp.localization.currentCulture.cultureName;
  
    try {
      abp.localization.currentCulture.cultureName = cultureName;
  
      const l = abp.localization.getResource(resourceName);
      return l(key);
    } finally {
      abp.localization.currentCulture.cultureName = previousCulture;
    }
  }
  

  C. Use it efficiently Load all needed cultures once (e.g., on widget init), then localize many keys with zero extra calls:

  async function initWidget() {
    await Promise.all([
      loadCultureLocalization("en"),
      loadCultureLocalization("ar"),
      loadCultureLocalization("hi")
    ]);
  
    const helloEn = await localizeText("HelloMsg", "en");
    const helloAr = await localizeText("HelloMsg", "ar");
    const helloHi = await localizeText("HelloMsg", "hi");
  
    console.log({ helloEn, helloAr, helloHi });
  }
  
  initWidget();
  

  Result: at most one HTTP request per culture (/Abp/ApplicationLocalizationScript?cultureName=xx) and then unlimited localizeText(...) calls with no additional server calls.

  ---

  Notes (important)

  • Your “5 calls => 5 server calls” issue happens because you were calling your own API per key. Instead, fetch all texts for a culture in one go (ABP’s localization script already does that).
  • Your “localization widget loads after localizeText completes” issue is a typical async ordering problem. The pattern above forces correct ordering via await loadCultureLocalization(...) and uses caching.

  Sources

  • https://abp.io/docs/latest/framework/ui/mvc-razor-pages/javascript-api/localization
  • https://abp.io/docs/10.0//framework/ui/mvc-razor-pages/javascript-api/localization

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  maliming created 16 hours ago

  Support Team Fullstack Developer

  hi

  This /api/abp/application-localization?cultureName=en&onlyDynamics=false endpoint gets all localization texts for a language.

  If you return the text for all languages at once, the response could be very large. You can add a custom API to get localization texts for specific keys and specific languages.

  eg:

  /api/get-localization?key=HelloMsg&languages=en,ar,hi
  
  /api/get-localization?keys=Hello1,Hello2,Hello13&languages=en,ar,hi
  

  Thanks.

  Save Cancel
• 

  0

  maliming created 14 hours ago

  Support Team Fullstack Developer

  : )

  Save Cancel
• 

  0

  Vipinthachinari created 14 hours ago

  HI, Thank you for your Support, Do you mean we should use a separate API to fetch localization texts for the specified key and language?

  In my case, it needs to be dynamic and simple to use by just editing the JS file — for example: await localizeText("HelloMsg", "ar"); await localizeText("SampleText", "en"); It should work by simply changing the key and language without requiring complex modifications.

  Thanks.

  Save Cancel
• 

  0

  maliming created 13 hours ago

  Support Team Fullstack Developer

  hi

  Do you mean we should use a separate API to fetch localization texts for the specified key and language?

  Yes, then cache and use it in your custom localizeText method.

  ABP is designed to retrieve all localized texts for the current language at once, but your requirement is different from this.

  Thanks.

  Save Cancel
• 

  0

  Vipinthachinari created 12 hours ago

  Hi, I created a Localization widget for this purpose, but when I call localizeText() from another widget, the language texts are loaded only after the content is loaded, causing a delay.

  Is there any alternative method to handle this more efficiently?

  Thanks.

  Save Cancel