ng serve fails for localized builds with @angular/build >= 20.3.7

[chet-gleave]

With what library do you have an issue?

native-federation

Reproduction of the bug/regression with instructions

Serving builds localized with i18n and @angular/build <= 20.3.6 works fine as shown in the following repository:
https://github.com/chet-gleave/I18N-NG-Serve-NF-Issue

npm run start:shell @angular/build@20.3.6

npm run start:shell:fr @angular/build@20.3.6

npm run start:shell:de @angular/build@20.3.6

---

I have added a branch to demonstrate the issue:
https://github.com/chet-gleave/I18N-NG-Serve-NF-Issue/tree/Issue-Showcase

The browser console displays the following errors:

Uncaught TypeError: Failed to resolve module specifier "@angular/common/locales/global/fr". Relative references must start with either "/", "./", or "../".

Uncaught TypeError: Failed to resolve module specifier "@angular/common/locales/global/de". Relative references must start with either "/", "./", or "../".

Note that the error happens in between vite connecting:

npm run start:shell @angular/build@20.3.7

npm run start:shell:fr @angular/build@20.3.7

npm run start:shell:de @angular/build@20.3.7

Compatibility Table

Command	@angular/build 20.3.6	@angular/build 20.3.7
npm run start:shell	✅	✅
npm run start:shell:fr	✅	❌
npm run start:shell:de	✅	❌

Expected behavior

Localized builds should serve as they were prior to this update to @angular/build

Versions of Native/Module Federation, Angular, Node, Browser, and operating system

Native/Module Federation: @angular-architects/native-federation@20.3.1
Angular: ^20.3
Node: 22.22.0
Browser: Chrome
Operating system(s): Windows 10/11

Other information

Angular Release 20.3.7:
https://github.com/angular/angular-cli/releases/tag/20.3.7

Suspected commit that broke the behavior:
angular/angular-cli@8cdda11

"...
Previously, the angular:locale/data: namespace was left unresolved by the build process for the dev server. This caused Vite to treat the namespace as a new dependency, triggering a pre-bundling step that led to the error.
With this change, esbuild now resolves the angular:locale/data: namespace and replaces it with the direct module import path. ..."

I'm not sure what the fix is for this so I'm marking as unwilling to submit a PR but happy to provide any other details.

Also, it would be really great if there was more documentation around native federation and i18n integration. Even just an example repository would go a long way.

I would be willing to submit a PR to fix this issue

• Yes
• No

[chet-gleave]

#1011 might be related. Not sure if my configuration is the appropriate way to set up i18n so it's hard to say

[inertech]

I’m experiencing exactly the same issue.

The root cause appears to be that the problematic import (@angular/common/locales/global/de) is located inside the polyfills.js file. Imports within this file cannot use import maps because Native Federation depends on import map shims which are loaded at a later stage.

The only workaround I’ve found is to exclude the entire @angular/common package from sharing in the federation.config.js file. Unfortunately, it doesn’t seem possible to exclude just the single import (@angular/common/locales/global/de) and the whole base package has to be skipped.

This however led to additional issues. As a result I ended up excluding all @angular packages from sharing. While this resolves the problem, it is clearly inefficient.

[rdmcintosh94]

ES build has stopped support for JIT compilation from 19 --> 20, therefore you need to remove "aot:false" from your angular.json build options.