angular, module federation without sharing Inject error

Question

I have angular 12 microfrontend applications which works fine if I share core components like this

shared: {
        '@angular/core': { eager: true, singleton: true },
        '@angular/common': { eager: true, singleton: true },
        '@angular/router': { eager: true, singleton: true },
      },

but if I remove sharing and define both host and child with empty 'shared' like this child:

plugins: [
    new ModuleFederationPlugin({
      name: 'profile',
      library: { type: 'var', name: 'profile' },
      filename: 'remoteEntry.js',
      exposes: {
        ProfileModule: './projects/mdmf-profile/src/app/profile/profile.module.ts',
      },
      shared: {
      },
    }),
  ],

host:

plugins: [
    new ModuleFederationPlugin({
      shared: {
      },
    }),
  ],

I get this error in runtime:

ERROR Error: Uncaught (in promise): Error: inject() must be called from an injection context
Error: inject() must be called from an injection context
    at yD (441.js:1:26044)
    at Object.gt (441.js:1:26219)
    at d.ɵfac [as factory] (441.js:1:168088)
    at AE.hydrate (main.js:1:201332)
    at AE.get (main.js:1:199395)
    at main.js:1:199708
    at Set.forEach (<anonymous>)
    at AE._resolveInjectorDefTypes (main.js:1:199692)
    at new iS (main.js:1:230293)
    at hd.create (main.js:1:230989)
    at Ge (polyfills.js:1:162723)
    at Ge (polyfills.js:1:162219)
    at polyfills.js:1:163611
    at ce.invokeTask (polyfills.js:1:153753)
    at Object.onInvokeTask (main.js:1:235279)
    at ce.invokeTask (polyfills.js:1:153672)
    at _e.runTask (polyfills.js:1:149032)
    at Q (polyfills.js:1:155855)

I tried include angular libraries with 'paths' setting in tsconfig, but it didn't help

"paths": {
      "@angular/*": [
        "node_modules/@angular/*"
      ]
    },

what should I configure to make it work?

Answer 1

I have the same problem
I solved it by edit file webpack.config.js. Following code below

webpack.config.js

const ModuleFederationPlugin = 
require("webpack/lib/container/ModuleFederationPlugin");

const mf = require('@angular-architects/module-federation/webpack');
const share = mf.share;
const path = require('path');

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
    path.join(__dirname, './tsconfig.json'),
    [/* mapped paths to share */]);

module.exports = {
    output: {
        publicPath: "auto",
        uniqueName: "<projectNameWithCamelCase>",
    },
    optimization: {
        // Only needed to bypass a temporary bug
        runtimeChunk: false
    },
    resolve: {
        alias: { ...sharedMappings.getAliases() }
    },
    plugins: [
        new ModuleFederationPlugin({

            // For remotes (please adjust)
            name: "<projectNameWithCamelCase>",
            library: { type: "var", name: "<projectNameWithCamelCase>" },
            filename: "remoteEntry.js",
            exposes: {
               './Module': './src/app/.../<module-name>.module.ts',
            },
            shared: share({
                "@angular/core": { singleton: true },
                "@angular/common": { singleton: true },
                "@angular/router": { singleton: true },
                ...sharedMappings.getDescriptors()
            })
        }),
        sharedMappings.getPlugin()
    ],
};

package.json

  "dependencies": {
    "@angular-architects/module-federation": "14.3.14",
    "@angular-architects/module-federation-runtime": "^14.3.14",
    "@angular-architects/module-federation-tools": "^14.3.14",
    "@angular/core": "^12.2.16",
    "@angular/material": "^12.2.13",
  }