Angular Material and Kendo doesn't work with Module Federation Plugin: Bootstrap call not found

[fabiostrada]

I built a microfrontend application using Angular CLI and Module Federation Plugin. When I try to install Angular Material or Kendo, I've got this problem: Bootstrap call not found.

I followed this link to resolve this problem. Unfortunately, I've got further problems:

1. When I install Angular Material, I've got this error:
   Your project is not using the default builders for "build". The Angular Material schematics cannot add a theme to the workspace configuration if the builder has been changed.

2. When I install Kendo, I've got this error:
   Skipping installation: Package already installed. File node_modules/@progress/kendo-angular-buttons/package.json does not exist.

I found a temporary solution: Before installing the libraries, I replaced the contents of main.ts with the contents of bootstrap.ts.

main.ts:

/*import('./bootstrap')
    .catch(err => console.error(err));
*/
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

After installing the libraries, I restored its contents:

import('./bootstrap')
    .catch(err => console.error(err));

This is not a best solution. is there a better solution?

[vankop]

better ask in Angular Material or Kendo issue tracker..

[fabiostrada]

If you are using Angular with Module Federation Plugin and If you want to install any graphics libraries, Module Federation plugin doesn't work. In fact, to make module federation work, we need to bootstrap the app asynchronously:
main.ts ---dynamic-import---> bootstrap.ts
However, many libraries assume that bootstrapping directly happens in main.ts.

[vankop]

this is angular specific stuff (how to bootstrap angular app), webpack can't help here..

[vankop]

So answering your question

This is not a best solution. is there a better solution?

from webpack side for now there is no better solution