im using module federation for angular micro front end with angular V17 projects. im exposing routes from remote module.

for initial routing it is working good, but i have 2 buttons in remote module and each button have different routings, in which one is sign-up component. when it is tested in remote module it is working perfectly because of base url “://127.0.1:5300/sign-up”, but when we are routing from from main module the url will be “://127.0.1:5200/auth/sign-up”. when routing its throwing error that sign-up path was not declared as the path was declared in remote module.

git hub url for repos

// remote routes
export const routes: Routes = [
    {
        path: "",
        component: AuthComponent,
        children: [
            {
                path: "login",
                component: LoginComponent
            },
            {
                path: "sign-up",
                component: SignUpComponent
            },
            {
                path: "",
                redirectTo: "login",
                pathMatch: "full"
            },
        ]
    }
];

remote web pack

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

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

module.exports = {
  output: {
    uniqueName: "auth",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
      library: { type: "module" },

      // For remotes (please adjust)
      name: "auth",
      filename: "remoteEntry.js",
      exposes: {
        "./routes": ".//src/app/app.routes.ts",
        "./auth-routes": ".//src/app/auth/auth.routes.ts",
        './Component': './/src/app/app.component.ts',
        './Login': './/src/app/login/login.component.ts',
      },

      // For hosts (please adjust)
      // remotes: {
      //     "mfe1": "http://localhost:3000/remoteEntry.js",

      // },

      shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "bootstrap": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

        ...sharedMappings.getDescriptors()
      })

    }),
    sharedMappings.getPlugin()
  ],
};

and in shell(main) web pack

// ..... other
module.exports = {
  output: {
    uniqueName: "main",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
      library: { type: "module" },
      // For hosts (please adjust)
      remotes: {
        "auth": "http://localhost:5300/remoteEntry.js",
      },

      shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
        "bootstrap": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

        ...sharedMappings.getDescriptors()
      })

    }),
    sharedMappings.getPlugin()
  ],
};

in shell routing

export const routes: Routes = [
    {
        path: "auth",
        loadChildren: () => import("auth/auth-routes").then(m => m.routes).catch(e => console.error(e))
    },
    {
        path: "",
        redirectTo: "auth",
        pathMatch: "full"
    }
];

error image