Nx Angular with dynamic module federation doesn't respects webpack.prod.config remotes config

[bhanuchhabra7]

I have created this setup using nx angular dynamic module federation.

host
|
---- app1
---- app2

The host has webpack.prod.config and /assets/module-federation.manifest.json

content of webpack.prod.config

const { withModuleFederation } = require('@nrwl/angular/module-federation');
const config = require('./module-federation.config');
module.exports = withModuleFederation({
  ...config,
  remotes:[
    ['app1', 'https://app1.example.com'],
    ['app2', 'https://app2.example.com']
  ]

contents of
module-federation.manifest.json

{
  "app1": "http://localhost:4201",
  "app2": "http://localhost:4202"
}

main.ts looks like this:

import { setRemoteDefinitions } from '@nrwl/angular/mf';

fetch('/assets/module-federation.manifest.json')
  .then((res) => res.json())
  .then((definitions) => setRemoteDefinitions(definitions))
  .then(() => import('./bootstrap').catch((err) => console.error(err)));

then I build all apps using

nx run app2:build:production
nx run app1:build:production
nx run host:build:production

then I serve application using any server (say IIS or Nginx)

I get this error:

EXPECTATION : when building the host app in production mode, the configuration provided in webpack.prod.config should be respected.