标签: webpack-module-federation

我有一个有角度的应用程序，我决定公开这个组件：

new ModuleFederationPlugin({
  
    // For remotes (please adjust)
    name: "app1",
    filename: "app1.js",
    exposes: {
         './Heroes': './/src/app/heroes/heroes.component.ts',
    },        

该组件以这种方式呈现：

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-heroes',
 templateUrl: './heroes.component.html',
 styleUrls: ['./heroes.component.sass']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
 }
}

在我的主应用程序中，我想这样做：

<app-heroes></app-heroes>

就像我会做的那样，如果组件是本地的，如何实现这一点？理论上我必须：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
   AppComponent,
   HeroComponent, //it's …

我正在使用 webpack 模块联合插件，并且有容器和微前端应用程序（两者都是在 React 上编写的）。根据新的要求，我应该使用第三方服务 Auth0 和@auth0/auth0-react包来实现身份验证逻辑。

该包使用上下文和提供程序在组件树之间共享数据（用户信息、令牌等），因此我使用身份验证提供程序包装了我的容器应用程序：

<Auth0Provider
  domain={domain}
  clientId={clientId}
  redirectUri={window.location.origin}
  onRedirectCallback={onRedirectCallback}
>
  {children}
</Auth0Provider>

要访问组件树中任何位置的身份验证数据，我们可以使用useAuth0钩子：

  import { useAuth0 } from '@auth0/auth0-react';
  const {
    isLoading,
    isAuthenticated,
    error,
    user,
    loginWithRedirect,
    logout,
  } = useAuth0();

现在，我陷入困境，如何访问微前端中的最新身份验证数据/上下文？注意：容器应用程序的身份验证上下文将异步更新（在“/token”请求完成后）

AuthProvider根据我的尝试，与我的微前端共享为服务：

容器应用程序webpack 配置：

name: 'container',
exposes: {
  './App': './src/App',
  './AuthenticationProvider': './src/AuthenticationProvider',
},

微前端应用程序webpack 配置：

remotes: {
  container: 'container@http://localhost:8080/remoteEntry.js',
},

然后 import { AuthenticationProvider } from 'container/AuthenticationProvider'; 在我的微前端应用程序中。

当然，它不会按预期工作，最新数据将仅在容器应用程序中。 …

我正在尝试按照此示例使用webpack5 模块联合来实现 Angular 中的微前端概念Module federation with Angular，但我面临这个错误

我尝试了这个答案中提供的解决方案，必须从注入上下文调用inject()，但它不起作用。

目前我在这两个应用程序中都使用 Angular 版本 11。

正在导入的应用程序的 package.json （子级）

    "resolutions": {
    "webpack": "5.0.0"
  },
  "dependencies": {
    "@angular/animations": "11.0.0-next.6",
    "@angular/cdk": "11.0.0-next.6",
    "@angular/common": "11.0.0-next.6",
    "@angular/compiler": "11.0.0-next.6",
    "@angular/core": "11.0.0-next.6",
    "@angular/forms": "11.0.0-next.6",
    "@angular/platform-browser": "11.0.0-next.6",
    "@angular/platform-browser-dynamic": "11.0.0-next.6",
    "@angular/platform-server": "^11.0.0",
    "@angular/router": "11.0.0-next.6",
    "@angular/service-worker": "11.0.0-next.6",
    "@fortawesome/angular-fontawesome": "^0.8.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "angular-font-awesome": "^3.1.2",
    "bootstrap": "^4.3.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^3.1.4",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "js2xmlparser": "^4.0.0",
    "moment": "^2.25.3",
    "moment-timezone": "^0.5.28",
    "ngx-webstorage-service": "^4.1.0",
    "node-sass": …

不幸的是，我对此的重现是在一个复杂的专有项目中，所以我会尽力解释发生了什么。

最接近我的用例的示例项目是这个：https : //github.com/module-federation/module-federation-examples/tree/master/dynamic-system-host 本质上，我有一个全向设置，其中一个Shell App 使用一组远程应用程序。远程应用程序是在运行时发现的，因此未在 Webpack 配置中指定。

Shell 以及所有 Remotes 都依赖于共享库 my-shared-lib：

"dependencies": {
    "my-shared-lib": "^1.0.0"
}

Shell 在其 Webpack 配置中将此库公开为一个急切的单例：

new ModuleFederationPlugin({
  name: 'shell',
  filename: 'shellDefinition.js',
  shared: {
      'my-shared-lib': { singleton: true, eager: true, requiredVersion: '^1.0.0' }
  },
}),

遥控器，在他们的配置中，也有它作为共享，但并不急切：

new ModuleFederationPlugin({
  name: 'remoteNameHere',
  filename: 'remoteDefinition.js',
  exposes: {
    './app': path.join(modulePath, 'app.js'),
  },
  shared: {
      'my-shared-lib': { singleton: true, eager: false, requiredVersion: '^1.0.0' }
  },
})

问题是这样的：我已经通过运行时调试和检查 Webpack 生成的包验证了这个库被包含并实例化了几次——一次用于外壳，一次用于每个远程。lib 的代码甚至存在于 Webpack 在获取暴露的 ./app.js 时加载的 Remote 的包中。

我不知道这里发生了什么。我也尝试共享 …

我正在使用以下包开发带有 webpack5 和 Angular 11 的模块联合原型。

https://www.npmjs.com/package/@angular-architects/module-federation

使用样式时此包存在一个已知问题。

styleUrls 的错误 目前，不幸的是，实验性 CLI/webpack5 集成中存在一个错误，导致在将共享库与指向 styleUrls 的组件一起使用时出现问题。目前，您可以通过删除应用程序和库中的所有 styleUrl 来解决此问题。

因此，解决方案是将所有 css 放入带有标签的 HTML 中。

就我而言，我有使用 SCSS 的现有项目。如果我想使用这个给定的包来使用微前端，我必须迁移 CSS 中的所有 SCSS 并将其放入 HTML 文件中，这是一项非常艰巨的任务。

问题：有没有更好的方法来处理 SCSS 以及具有使用 @angular-architects/module-federation 包的微前端的项目？

我正在为一个项目进行调查micro frontend和架构。最近， Webpack 的微前端解决方案已准备好投入生产。通过模块联合，我们有了 shell 应用程序 或 的概念，它容纳您的微前端应用程序 或。monorepoAngular 12Webpack 5Module Federationhostremotes

我也在研究monorepos，特别是nx.

Module Federation与 monorepo 结合是nx一件事吗？或者，是否不需要像nxwhenModule Federation已经为我提供了一个shell 包含我所有微前端应用程序的东西？据我了解，Module Federation它听起来几乎就像一个 monorepo 本身。

换句话说，Webpack 5 Module Federation和是nx monorepos相互排斥的还是可以/应该一起使用？

当我将 React 与 ReactRouter 结合使用时，我可以延迟加载应用程序的入口文件吗？remoteEntry.js当我进入页面时，我拥有的每个应用程序都有很多文件请求。由于性能原因，我不想一开始就获取它。我想在访问特定应用程序的路线时加载它们。

我创建了一个应用程序（app1），其中包含以下内容webpack.config.js：

new ModuleFederationPlugin({
            name: "app1",
            filename: "remoteEntry.js",
            exposes: {
                "./app1": "./src/components/Sidebar",
            },
            shared: [
                {
                    ...deps,
                    react: {
                        eager: true,
                        requiredVersion: deps.react,
                    },
                    "react-dom": {
                        eager: true,
                        requiredVersion: deps["react-dom"],
                    },
                    "react-redux": {
                        eager: true,
                        requiredVersion: deps["react-redux"],
                    },
                  ....
                  })

以及具有以下内容的主机应用程序webpack.config.js：

new ModuleFederationPlugin({
            name: "host",
            remotes: {
                app1: "app1@http://localhost:3002/remoteEntry.js",
            },
            shared: [
                {
                    ...deps,
                    react: {
                        eager: true,
                        requiredVersion: deps.react,
                    }
                },
            ]
        }),

当我启动主机应用程序时，它显示：

  Shared module is not available for eager 
  consumption:webpack/sharing/consume/default/react/react

我尝试了该bootstrap.js方法。就我而言，我创建了该bootstrap.tsx …

我需要一种方法来测试一个组件，其中另外两个组件是延迟加载的。

我们正在使用webpack 模块联合。因此，这里ComponentOne和ComponentTwo是在组件内部延迟加载的微前端App。因此，App这里的组件是包含两个应用程序并提供它们之间的路由的容器应用程序。

我的App.tsx看起来像这样：

import { Suspense, lazy } from 'react';
import { Route, Routes } from 'react-router-dom';

const ComponentOne = lazy(() => import('components/ComponentOne));
const ComponentTwo = lazy(() => import('components/ComponeentTwo'));

export const App = () => {
  return (
    <Suspense fallback={<div>FallbackDummy</div>}>
      <Routes>
        <Route path="/" element={<ComponentOne />} />
        <Route path="/two" element={<ComponentTwo />} />
      </Routes>
    </Suspense>
  );
};

这个应用程序组件在我的文件中使用bootstrap.tsx如下：

import { render } from 'react-dom';
import { BrowserRouter …

我想为Webpack Module-Federation Angular应用程序的每个远程模块实现隔离路由。

import { 
    startsWith, 
    WebComponentWrapper, 
    WebComponentWrapperOptions 
} 
from '@angular-architects/module-federation-tools';

[...]

export const APP_ROUTES: Routes = [
    [...]
    {
        matcher: startsWith('angular3'),
        component: …