Dynamic import of locales not available in Angular 13

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

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

[crh225]

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