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 ?
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
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