Issues In Rendering Remote App

[dhammadahiwale5]

Sir . i am getting issues in rendering remote app in host . it appends the content instead of replacing please assist

[harshal77]

Please share the details of the issue will fix it

[dhammadahiwale5]

routes of parent app

{ path: '', component: ParentComponent }, { path: 'parent', component: ParentComponent },

  {
    path: 'child1',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http:///localhost:4201/remoteEntry.js',
        exposedModule: './Child1'
      })
        .then((m: any) => m.AppModule)
  },
  {
    path: 'child2',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http:///localhost:4202/remoteEntry.js',
        exposedModule: './Child2'
      })
        .then((m: any) => m.AppModule)
  },

============================================================================== webpack of first child application

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: "child1", publicPath: "auto" }, optimization: { runtimeChunk: false }, resolve: { alias: { ...sharedMappings.getAliases(), } }, experiments: { outputModule: true }, plugins: [ new ModuleFederationPlugin({ library: { type: "module" },

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

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

  // },

  name: "child1",
  filename: "remoteEntry.js",
  exposes: {
    './Child1': './/src/app/app.module.ts',
  },

  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' },

    ...sharedMappings.getDescriptors()
  })

}),
sharedMappings.getPlugin()

], };

webpack for second child application

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: "child2", publicPath: "auto" }, optimization: { runtimeChunk: false }, resolve: { alias: { ...sharedMappings.getAliases(), } }, experiments: { outputModule: true }, plugins: [ new ModuleFederationPlugin({ library: { type: "module" },

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

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

    // },

    name: "child2",
    filename: "remoteEntry.js",
    exposes: {
        './Child2': './/src/app/app.module.ts',
    },
    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' },

      ...sharedMappings.getDescriptors()
    })
}),
sharedMappings.getPlugin()

], };

[dhammadahiwale5]

i am using angular 18 for this

[dhammadahiwale5]