How to render Angular Module in nextjs (React App)

Question

I am working to integrate Micro Front End, part of the integration we have to include angular app in nextjs, , So We have injected the angular remoteEntry.js , like below

injectScript({
   global: 'app',
   url: 'https://some.com/some-name/remoteEntry.js',
}).then(remoteContainer => {

   remoteContainer.get('./ComponentModule').then(data => {
      webpage = data() // Here i am getting the Angular module 
   })
})

So we are getting the Angular Module and app has been added to browser's window , So How can we render that in nextjs page ,

package used https://www.npmjs.com/package/@module-federation/nextjs-mf

Answer 1

I made it using , next/dynamic

  import dynamic from 'next/dynamic'
  const AngularModule = dynamic(
    () => import('app/dashboard').then(mod => mod.mount),
      {
        ssr: false,
      }
  )

Then you have to call the Component like below

 <angular-component></angular-component>
      <AngularModule />

Things to note

• you have to export the method from angular app, which should bootstrap the app
• you have to use the same html tag which is used in angular