Getting Error when routing to remote module nested component from shell in angular 17 micro frontend using module federation

Question

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