Implementing federated module in Angular 15 with Module Federation and encountering 'Shared module is not available for eager consumption' error

Question

I'm trying to implement a federated module in Angular 15. I've tried multiple configurations but always fall into the same issue when trying to serve my remote:

main.ts:2 Error: Shared module is not available for eager consumption: 46269
at webpack_require.m.<computed> (consumes:145:1)
at webpack_require (bootstrap:19:1)
at 94666 (text-field.mjs:456:1)
at webpack_require (bootstrap:19:1)
at 34497 (animations.mjs:539:1)
at webpack_require (bootstrap:19:1)
at 25533 (vendor.module.ts:37:16)
at webpack_require (bootstrap:19:1)
at main.ts:1:1
at ZoneDelegate.invoke (zone.js:372:26)

Being that "46269" module @angular/common.

This is my webpack.config.js:

module.exports = withModuleFederationPlugin({
    name: 'mfe1',
    exposes: {
        './FederatedModule': './src/app/federation/federated.module.ts',
    },

    shared: share({
        '@angular/core': { singleton: true, requiredVersion: '^15.0.0', strictVersion: true },
        '@angular/common/': { singleton: true, requiredVersion: '^15.0.0', strictVersion: true },
        '@angular/router': { singleton: true, requiredVersion: '^15.0.0', strictVersion: true },
        '@angular/common/http': { singleton: true, requiredVersion: '^15.0.0', strictVersion: true },
    }),
});

And yes, I have my main.ts with:

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

And my boostrap.ts:

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));

For reference, also my AppModule:

@NgModule({
    declarations: [AppComponent],
    imports: [
        HttpClientModule,
        BrowserModule,
        BrowserAnimationsModule,
        RouterModule.forRoot(appRoutes, {}),
        ...
        FederatedModule,
    ],
    exports: [RouterModule],
    providers: [
            ...
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

And the FederatedModule I'm trying to expose:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FederatedTestComponent } from './federated-test/federated-test.component';

const ROUTES: Routes = [{ path: 'federated', component: FederatedTestComponent }];

@NgModule({
    declarations: [FederatedTestComponent],
    imports: [CommonModule, RouterModule.forChild(ROUTES)],
})
export class FederatedModule {}

I've tried multiple configurations, removing the singleton: true, setting the requiredVersion: auto, etc. But always get the same issue. Also, trying to set eager: true, results in the angular CLI not even compiling the project and giving me the error:

An unhandled exception occurred: Cannot read property 'import' of undefined

It's true that, if I remove the @angular/common entry from my webpack.config.js file, the remote is served correctly and I can even see load the Federated module there, but then the issue is in my host, where I get the error:

Error: inject() must be called from an injection context

Which as I found, it's due to multiple Angular versions being loaded as once, so I think the issue falls back to the remote problem, since I should be exporting @angular/common as I saw in many many examples. For reference, the webpack.config.js of my host is the same as I'm showing above for the remote.

Also I read this post thoroughly: Shared module is not available for eager consumption - Angular 13 but none of the solutions seem to work for me.

score 0 · Answer 1 · answered Aug 03 '23 at 11:50

0

Faced this exact same issue. What helped me was explicitly adding the angular modules in shared section in shell.

https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/tutorial.md

Follow this tutorial.

answered Aug 03 '23 at 11:50

Ekata Prakash

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 09 '23 at 15:18
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/34788973) – Yaroslavm Aug 10 '23 at 08:53

Implementing federated module in Angular 15 with Module Federation and encountering 'Shared module is not available for eager consumption' error

1 Answers1