Angular 13 Cannot find module '@angular/common/locales/fr.js'

user_3738129 0
Viewed 2381

I moved from angular 12 to angular 13 and I've had a new error. So basically I used to load the culture of the user by importing the locale file.

 const localeUri = `@angular/common/locales/${localeId}.js`;
return import(localeUri).then((module) => {
    logger.debug("Culture Angular : '" + localeId + "'");
    registerLocaleData(module.default);
}).catch((err) => {
    logger.fatal("culture not defined for angular", err);
});

This solution use to work with angular12 but not anymore with angular13. Webpack can't find any of the locale. I tried some solutions found on github but without any posivite results
https://github.com/highlightjs/highlight.js/issues/3223#issuecomment-953337602

https://github.com/angular/angular-cli/issues/22154

Any solution ?

angular13 angular webpack
3 Answers

Managed to make it work by changing the path we import from and changing .js to .mjs

Before:

import(
  /* webpackInclude: /(de|de-AT|en|en-GB)\.js$/ */
  `@angular/common/locales/${locale}.js`
).then((module) => {
  registerLocaleData(module.default);
});

After:

import(
  /* webpackInclude: /(de|de-AT|en|en-GB)\.mjs$/ */
  `../../../../../../node_modules/@angular/common/locales/${locale}.mjs`
).then((module) => {
  registerLocaleData(module.default);
});

Using Angular 13.1.1 and NX 13.4.2

Solution was also mentioned here already: https://github.com/angular/angular-cli/issues/22154

user_28505850

Recently, I have migrated to Angular 13. I also faced the same issue. The changes below worked for me.

import(`@/../@angular/common/locales/${lang}.mjs`)
.then(localModule => {
          registerLocaleData(localModule.default)
});
user_77162320

You have to import from @angular/common/locales/global/ now, and registerLocaleData is not needed anymore.

Before Angular 13:

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeFr, 'fr-FR');

With Angular 13:

import '@angular/common/locales/global/fr';

// and you can use fr-FR whenever you want
user_13955550
Related