Unable to resolve `@angular/common/locales/*`

[kryshac]

if I work with serve everything works correctly. but after building I get the following error:

Unable to resolve specifier '@angular/common/locales/en`

I think the problem is because of the *

[kryshac]

I added a fix in @softarc/native-federation temporarily

diff --git a/node_modules/@softarc/native-federation/src/lib/utils/package-info.js b/node_modules/@softarc/native-federation/src/lib/utils/package-info.js
index 51680b0..09cd6ee 100644
--- a/node_modules/@softarc/native-federation/src/lib/utils/package-info.js
+++ b/node_modules/@softarc/native-federation/src/lib/utils/package-info.js
@@ -259,6 +259,15 @@ function _getPackageInfo(packageName, directory) {
             esm,
         };
     }
+    cand = secondaryPgkPath + '.mjs';
+    if (fs.existsSync(cand)) {
+        return {
+            entryPoint: cand,
+            packageName,
+            version,
+            esm,
+        };
+    }
     // TODO: Add logger
     logger_1.logger.warn('No entry point found for ' + packageName);
     logger_1.logger.warn("If you don't need this package, skip it in your federation.config.js or consider moving it into depDependencies in your package.json");

in federation.config.js I added the following configurations:

const { withNativeFederation, shareAll, share } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({
  name: 'office',

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),

    ...share(
      [
        '@angular/common/locales/en',
        '@angular/common/locales/en-150',
        '@angular/common/locales/en-CA',
        '@angular/common/locales/en-GB',
      ].reduce(
        (acc, name) => ({
          ...acc,
          [name]: { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: false },
        }),
        {},
      ),
    ),
  },

  skip: [
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket',
    // Add further packages you don't need at runtime
  ],

  sharedMappings: ['@lib/env'],
});

I couldn't find where the source from `@softarc/native-federation' is located to see if there is an issue. @manfredsteyer, I saw that you published, Could you share your thoughts on this implementation?? (can also be added for .js)

[digaus]

Thanks for this issue. I am currently testing out Native Federation for usage in out company and I just could not get it to work with localeData... it was driving me crazy... with this workarround it finally works :)

[Sabbacus]

I hade this error (or something similar at least). My workaround was to add the locales to the polyfill array. "polyfills": ["zone.js", "@angular/localize/init", "@angular/common/locales/global/sv", "@angular/common/locales/global/en-GB"],

[kryshac]

@Sabbacus hello, I also tried your version, but I still get the same error in runtime but also a new one in build.

And I think it's not the best solution because you won't be able to do three shakes, they will all end up in the main bundle

[digaus]

@kryshac do you have a solution for the mfe ? This workarround makes it work in the wrapper application but when I just open the url of the mfe I still get this error :?

[kryshac]

@digaus did you also put this mfe/federation.config.js?

...share(
      [
        '@angular/common/locales/en',
        '@angular/common/locales/en-150',
        '@angular/common/locales/en-CA',
        '@angular/common/locales/en-GB',
      ].reduce(
        (acc, name) => ({
          ...acc,
          [name]: { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: false },
        }),
        {},
      ),
    ),

[digaus]

Yes I did. What's worth the mfe is an angular 16 project.

[kryshac]

@digaus can you create a repo with this error because it doesn't reproduce for me?

[digaus]

@digaus can you create a repo with this error because it doesn't reproduce for me?

https://github.com/digaus/mfe1

Here you go. Opening URL of mfe (http://localhost:4201) results in mentioned error.

Using mfe inside shell application however works.

Edit: Nvm here it seems to work. Looking into my project now to see whats different

[kryshac]

@digaus hi, I made some changes in this pull request and everything works for me as expected.

what changes did i make:

1. I don't know if you had done the package path, I added a script that does this automatically
2. Local de-DE does not exist in Angular

[digaus]

Yeah have done it locally but postinstall script is better. Also got it working with my test project. No clue what was wrong before.

Btw do you have an idea for an angular 16 project where I get errors that it cannot import my material styles? Working fine with an angular 17 test project but not with angular 16.

[kryshac]

I did not implement the micro front end on version 16, I waited to switch to 17 so that I could directly implement native-federation (because in 16 esbuild was in beta) but what error do you get?

[digaus]

Basically this:

https://github.com/angular-architects/module-federation-plugin/issues/373

[chkhaidzegiorgi]

i have same issue, actually for me locally everything works fine, locales are loaded, but I have issue when I deploy the project, any suggestions? @kryshac @digaus

[kryshac]

@chkhaidzegiorgi the fix is for build/deploy in serve worked without this implementation. what error do you have?

[chkhaidzegiorgi]

the error is that - Unable to resolve specifier '@angular/common/locales/de`

@kryshac tried to implement the save way as you did with patch but I have same issue

implementation:

[kryshac]

@chkhaidzegiorgi you can look here and see what is different from yours

[chkhaidzegiorgi]

I implemented exactly same way. but the difference is that I am calling registerLocaleData into app.module.ts

[kryshac]

@chkhaidzegiorgi create a repo that reproduces the error