CODEWITHSUNDEEP
angulartypescriptlocalizationlazy-loadingangular18
troge
troge

Reputation: 11

Angular 18: How can I Dynamically Load Locales

I am trying to dynamically load locales for my angular app so that not all the locales are imported at the same time. In previous versions of Angular, I was able to do this using the import function and registerLocaleData, but that seems to no longer work.

The below code works to load the "en" locale

import('@angular/common/locales/en')
  .then(languageModule => {
    return registerLocaleData(languageModule.default);
  });

But the below code will not work, despite the path(?) string given to the import function being the same as in the above block of code.

const localeId = 'en';
const localePath = `@angular/common/locales/${localeId}`;
import(localePath)
  .then(languageModule => {
    return registerLocaleData(languageModule.default);
  });

It will return the following error, produced on the import(localePath) line

ERROR TypeError: Failed to resolve module specifier '@angular/common/locales/en'

Does anyone know why this error is returned here?

There must be a better way of loading locales for an Angular 18 app without loading each supported locale manually (at the start of the file, or in an if statement, calling the right import('@angular/common/locales/XXXX') for a given localeID)

Upvotes: 1

Views: 94

Answers (0)

Related Questions