Giter VIP home page Giter VIP logo

Comments (4)

harshal77 avatar harshal77 commented on September 9, 2024

Please share the details of the issue will fix it

from micro-frontend-multi-framework.

dhammadahiwale5 avatar dhammadahiwale5 commented on September 9, 2024

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()

],
};

from micro-frontend-multi-framework.

dhammadahiwale5 avatar dhammadahiwale5 commented on September 9, 2024

i am using angular 18 for this

from micro-frontend-multi-framework.

dhammadahiwale5 avatar dhammadahiwale5 commented on September 9, 2024

Screenshot_select-area_20240730124415

from micro-frontend-multi-framework.

Related Issues (3)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.