Lazy Loading Locales with Angular

Normally, the CLI uses these bundles under the hood to dramatically speed up the creation of different language versions. However, we can divert it from its intended use to load the meta data dynamically on demand.

These modifications involve exchanging texts but also adding the right meta data. For the latter one, we need a way to simply add this meta data after the build. This is what global locals enable.

Obviously, this approach is much faster than the original one which compiled the whole application once per language.

In these cases, loading just the needed meta data on demand instead of loading the meta data for all languages upfront will improve your startup performance.

Lazy Loading

To demonstrate lazy loading global locals by hand, I've created a simple application which is using en-US by default:

After clicking the button German Version, the German locale meta data is lazy loaded and used. For this, I've created a simple script loader which is basically creating a script tag dynamically:

//
// Simplest Possible Script Loader TM
//

@Injectable({
  providedIn: 'root'
})
export class SimpleLoaderService {

  constructor() { }

  // Remeber already loaded files so that we
  // don't load it again.
  private loadedFiles = new Set<string>();

  loadScript(src: string): Promise<void> {

    // If the file is already loaded don't do anything.
    if (this.loadedFiles.has(src)) {
      return Promise.resolve();
    }

    return new Promise<void>((resolve, reject) => {

      // Create a script tag and point to java script file
      const script = document.createElement('script');
      script.src = src;

      // Resolve Promise after loading
      script.onload = () => {
        this.loadedFiles.add(src);
        resolve();
      };

      // Reject Promise on error
      script.onerror = () => {
        reject();
      };

      // Add script tag to page
      document.body.appendChild(script);
    });
  }

}

Our demo's AppComponent holds a date which happens to be the authors birth day (just saying ...) and a property holding the locale to use:

@Component({ [...] })
export class AppComponent {

  date = new Date('2020-01-20T17:00+01:00');
  lang = 'en-US';

  constructor(private loader: SimpleLoaderService) {
  }

  toGerman() {
    this.loader
        .loadScript('assets/de.js')
        .then(_ => this.lang = 'de-DE')
        .catch(err => console.error('Error loading file', err));
  }

}

The template displays this date as shown above:

{{ date | date:'long':'':lang }}

The method toGerman is bound to the shown button and uses our SimpleLoaderService to load the German locale. After that, it updates the lang property.

Testing the Application

To demonstrate that lazy loading really takes happen, you can open Chrome's network tab within the dev tools and click German Version within the page. You should see that this lazy loads the assets/de.js file. Also, you should now see a German date.

Conclusion

References