如何在 nextjs (React App) 中渲染 Angular 模块答案

【问题标题】：How to render Angular Module in nextjs (React App)如何在 nextjs (React App) 中渲染 Angular 模块
【发布时间】：2023-01-05 13:17:03
【问题描述】：

我正在努力集成微前端，集成的一部分我们必须在 nextjs 中包含角度应用程序，所以我们注入了角度 remoteEntry.js ，如下所示

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

所以我们得到了 Angular 模块并且应用程序已经添加到浏览器的窗口中，那么我们如何在 nextjs 页面中呈现它，

使用的包https://www.npmjs.com/package/@module-federation/nextjs-mf

【问题讨论】：

标签： reactjs angular webpack-module-federation nextjs-mf module-federationnextjs-mfutils

【解决方案1】：

我用 ,下一个/动态

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

然后你必须像下面这样调用组件

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

注意事项

您必须从 Angular 应用程序导出方法，这应该会引导应用程序
您必须使用在 angular 中使用的相同 html 标签

【讨论】：