webpack import(`@angular/common/locales/${mylocale}`) not working

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

common

Is this a regression?

Yes

Description

We load our locales dynamically using a dynamic import and registerLocaleData

this works in angular 12

const localeModule = await import(
  /* webpackInclude: /(sv|nb|da|fi|de|fr)/ */
  /* webpackChunkName: "locale" */
  `@angular/common/locales/${this.locale}.js`
)
registerLocaleData(localeModule.default)

The Problem

I found the root cause and it’s not a angular problem, but a webpack one https://github.com/webpack/webpack/issues/13865

But I though someone else might get stuck on the same thing, so I would add it as a regression.

Workaround

A workaround is to use a relative or absolute path to the node_modules folder instead

const localeModule = await import(
  /* webpackInclude: /(sv|nb|da|fi|de|fr).mjs$/ */
  /* webpackExports: "default" */
  /* webpackChunkName: "locale" */
  `node_modules/@angular/common/locales/${this.locale}`
)
registerLocaleData(localeModule.default)

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

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

Please provide the environment you discovered this bug in

No response

Anything else?

No response

[alan-agius4]

It’s important to point out that using Webpack specific features such as magic comments above 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.

[alan-agius4]

This is because dynamic imports don’t work in Webpack when an exports with wildcard is specified in package.json

Example

  "exports": {
    "./locales/global/*": {
      "default": "./locales/global/*.js"
    },
    "./locales/*": {
      "default": "./locales/*.mjs"
    },