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

Question

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 ?

Household

Answer 1

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

Bootle

Answer 2

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)
});

Cyclic

could you please elaborate how the path you specified (starting with @/../) works as compared to the earlier one? – Iona

First i tried with absolute path like ../../.././, it was working well in locally, when i turned my project into library, absolute path not help me. finally i changed to @/../ . which is working in local as well as library. – Cyclic

Answer 3

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

Theurich

No this solution doesn't work for me because my import are dynamic, for the example I wrote fr, but the locale can be anything. – Household

I have the same problem, and this also seems not to work... – Cb

@Cb did you find a solution ? – Household

@Household still searching... – Cb

@Cb same same :( – Household