Adding a Kendo Dropdown breaks Module Federation with @angular/localize error

Description of Issue

When I add a Kendo Dropdown to Angular Module Federation I get the error:

ERROR Error: It looks like your application or one of its dependencies is using i18n. Angular 9 introduced a global $localize() function that needs to be loaded. Please run ng add @angular/localize from the Angular CLI. (For non-CLI projects, add import '@angular/localize/init'; to your polyfills.ts file. For server-side rendering applications add the import to your main.server.ts file.)

This scenario is Kendo, but it may be the case that any third part project dependent on Angular i18n would have this issue.

Steps to Reproduce

• run npx create-nx-workspace@latest
• npm install --save-dev @nrwl/angular
• Use Nx Vs Code Extension to create host and name it host
• Use Nx Vs Code Extension to create a remote and name it remote
• npm install --save @progress/kendo-angular-dropdowns @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-angular-treeview @progress/kendo-angular-inputs @progress/kendo-angular-intl @progress/kendo-drawing @progress/kendo-angular-common @progress/kendo-licensing
• copy the code here https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/ and place it on the app.component.ts and app.compnent.html respectively.

Alternately you can clone this same repository. https://github.com/avington/kendo-test

More Information

The error says to add @angular/localize to the polyfill.ts files so I added it to both of them and that did not help. Also, I when I first only added the host app and ran the code it worked, but when I added the remote, then the code started failing with above error.

If you add the import to the main.server.ts file I get this error instead consumes:146 Uncaught Error: Shared module is not available for eager consumption: 5597 at Object.webpack_require.m.<computed> (consumes:146:1) at webpack_require (bootstrap:19:1) at Module.5352 (polyfills.js:12:80) at webpack_require (bootstrap:19:1) at startup:5:1

I also opened a ticket on the Telerik site and as of now they are not aware of any problems on their end.

BTW: If I do all the same and make it a React MFE project, everything works fine, so it is just an Angular thing.

[Coly010]

Hey! 😄

You can remove @angular/localize/init from your remote.

Then in the module-federation.config.js of your Host application, add the following:

shared: (libraryName, libraryOptions) => {
    if (libraryName === '@angular/localize/init') {
      return {
        ...libraryOptions,
        eager: true,
      };
    }
  },

It should look like this:

module.exports = {
  name: 'host',
  remotes: ['test'],
  shared: (libraryName, libraryOptions) => {
    if (libraryName === '@angular/localize/init') {
      return {
        ...libraryOptions,
        eager: true,
      };
    }
  },
};

I’ll add some built-in allowances for this package however as it’s expected to be eagerly consumed

[Coly010]

Yeah I agree. The change I made to try do this by default doesn’t appear to be working. Good spot