Dynamic import of locales not available in Angular 13

[Rambou]

Which @angular/* package(s) are the source of the bug?

common

Is this a regression?

Yes

Description

While in a previous version of angular, you could import locales and their extra's dynamically, it is impossible in angular 13. Below there is a sample of code with Webpack magic comments that lazy-load of locales was possible.

import(
  /* webpackExclude: /\.d\.ts$/ */
  /* webpackMode: "lazy-once" */
  /* webpackChunkName: "i18n-base" */
  `@angular/common/locales/${id}.mjs`)
.then(m => m.default)
.catch(error => {
   .....
});

Now Webpack throws an error because exports attribute seems to be misconfigured in package.json

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Error: Module not found: Error: Package path ./locales is not exported from package .../node_modules/@angular/common (see exports field in .../node_modules/@angular/common/package.json)

Please provide the environment you discovered this bug in

Angular CLI: 13.0.1
Node: 12.22.6
Package Manager: yarn 1.22.15
OS: linux x64

Angular: 13.0.0
... animations, cdk, common, compiler, compiler-cli, core
... elements, forms, language-service, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.1
@angular-devkit/build-angular   13.0.1
@angular-devkit/core            13.0.1
@angular-devkit/schematics      13.0.1
@angular/cli                    13.0.1
@schematics/angular             13.0.1
ng-packagr                      13.0.3
rxjs                            7.4.0
typescript                      4.4.4

Anything else?

No response

[alan-agius4]

@Rambou, the above mentioned behaviour is caused by a confirmed bug in Webpack. See webpack/webpack#13865 for which a workaround can be found highlightjs/highlight.js#3223 (comment).

It's important to point out that using Webpack specific features such as magic comments are not supported by the Angular tooling team. The fact that the Angular CLI is using Webpack is an implementation detail which can change in the future.

Duplicate of #22088

[Rambou]

@alan-agius4 thanks for your answer. The workaround highlightjs/highlight.js#3223 (comment) just fixes the typescript error but the import of the locale still doesn't work because the webpack magic comments are not being applied that way.

The solution to the issue is this one

import(
  /* webpackExclude: /\.d\.ts$/ */
  /* webpackMode: "lazy-once" */
  /* webpackChunkName: "i18n-extra" */
  `@/../node_modules/@angular/common/locales/extra/${id}`)

[jcompagner]

@Rambou, the above mentioned behaviour is caused by a confirmed bug in Webpack. See webpack/webpack#13865 for which a workaround can be found highlightjs/highlight.js#3223 (comment).

It's important to point out that using Webpack specific features such as magic comments are not supported by the Angular tooling team. The fact that the Angular CLI is using Webpack is an implementation detail which can change in the future.

But this is then very interesting, but how to do it then the "angular" way?

because in our product we use:

import(@angular/common/locales/${localeId}.js).
and
import(numbro/languages/${localeId})
and
import(@uppy/locales/lib/${localeId}.js)

so how to solve that problem then? We need dynamic loading or else i need to really load all of the locales up front already?
We have no idea what to load, our application is used and deployed all over so i even don't filter anything i just pack all locales files of all libs that have that and load them dynamically when needed with the locale the browser dictates (or the user wants)

[geo242]

Here is what is currently working for me with v13. I use this in a library and I can verify that the consuming applications of this library are getting the appropriate locale files built. I only want certain locals included.

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

[chris-house]

@geo242 answer worked for me. by adding the /node_modules/ in front of @angular/common

[Krasnov8953]

@geo242 doesn't work in v13 for me

import(
            /* webpackInclude: /(ru|en|it)\.mjs$/ */
            /* webpackMode: "lazy-once" */
            /* webpackChunkName: "i18n-base" */
            `/node_modules/@angular/common/locales/${code}.mjs`
        ).then((module) => { registerLocaleData(module.default) });

[McGiogen]

A relative path works for me (Angular 13 and Nx 13.4).

import(
  /* webpackInclude: /(it|en)\.mjs$/ */
  /* webpackChunkName: "./assets/l10n/locales/[request]"*/
  `../../../../../../node_modules/@angular/common/locales/${lang}.mjs`
) as Promise<{ default: unknown }>

and it works also with @Rambou path:

`@/../node_modules/@angular/common/locales/${lang}.mjs`

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}