@angular-architects/模块-federation-tools

加进 @angular-architects/module-federation 帮助减少锅炉板码.

目前发行的焦点是将网络组件与模块Federation for 多框架和多版本 微前端 :

通过汇编和装入这些 通过模块联合会的网络组件,我们可以像Angular一样共享库,如果它们使用相同的版本. 否则,模块联合会将在运行时决定为所涉微前端装入专用的 lib 版本:

这可以帮助 平衡权衡 介于捆绑大小和微前端隔离之间.

免责声明: 多框架和 -- Version Micro增加了总体复杂性,需要做一些工作。 这个图书馆试图隐藏一些.

特征

• ✅ 最小数额 模块联合会的微前端
• 你不需要额外的元框架 相反,你只是使用你选择的框架,例如:
• 扩展至 @angular-architects/模块编织

实例

• 生活实例
• 源代码 shell
• 微前端源代码
• 微小前端的源代码, 带有 Routing
• Vue 的微前端源代码
• 带有反光的微前端源代码
• 带有 AngularJS 的微前端源代码

教学

请找到我们的 这里的教程。 。 。 .

提供模块联合会的网络部分

这个帮助包假设微前端作为Web组件被曝光.

在 Angular 中将微前端显示为 Web 组件

要在Angular 中做到这一点,请安装 @angular/elements数字 :

npm i @angular/elements

然后,您可以直接将您的应用程序组件转换为 Web 组件 :

import { createCustomElement } from '@angular/elements';
[...]

@NgModule({
  [...]
  declarations: [
    AppComponent
  ],
  bootstrap: [] // No bootstrap components!
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  ngDoBootstrap() {
    const ce = createCustomElement(AppComponent, {injector: this.injector});
    customElements.define('angular1-element', ce);
  }

}

将 Web 组件与 React 等其他框架一起曝光

如果您的框架不直接支持将您的应用程序暴露为网络组件,则您可以轻松地在它周围写出一个简单的Srapper. 基本上,一个网页组件 -- -- 更精确地说: 自定义元素 -- -- 只是扩展的 EcmaScript 类 HtmlElement 登记 customElements.register请找到 以此处反应为例。 。 。 .

通过模块联合会展示基于网络组件的微前端

添加 @angular-architects/module-federation 到您的微前端 :

ng add @angular-architects/module-federation

让你 webpack.config.js 揭露整个 bootstrap.ts 靴子绑住你 AppModule。 。 。 .

// webpack.config.js
name: "angular3",
library: { type: "var", name: "angular3" },
filename: "remoteEntry.js",
exposes: {
    './web-components': './src/bootstrap.ts',
},

如果拖曳您的应用程序的文件名称不同, 请相应调整这些设置 .

Angular 帮助工具

为了实现一个多版本/多框架情景的Angular,我们需要一些帮助器功能。 使用它们最简单的方法 就是用我们的靴子扶手 把你的Angular app绑住:

// main.ts
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { bootstrap } from '@angular-architects/module-federation-tools';

bootstrap(AppModule, {
  production: environment.production,
  appType: 'shell',
  // appType: 'microfrontend'
});

使用此靴子陷阱帮助工具 两者你的外壳和微型前端!

请确定设置 appType 改为 shell 用于您的外壳应用程序和 microfrontend 为您的微前端.

运行到 Web 组件

这个 WebComponentWrapper 帮助您引导到网络组件 :

export const APP_ROUTES: Routes = [
    [...]
    {
        path: 'angular1',
        component: WebComponentWrapper,
        data: {
          remoteEntry: 'https://nice-grass-018f7d910.azurestaticapps.net/remoteEntry.js',
          remoteName: 'angular1',
          exposedModule: './web-components',
          elementName: 'angular1-element'
        } as WebComponentWrapperOptions
    },
    [...]
}

重要:角13+

从Angular 13开始,CLI正在排放EcmaScript模块. 因此,我们需要调整WebComponentWrapper在装入已用CLI 13或更高版本创建的遥控器时的用法. 这个,就这个 type 改为 remote 跳过 remoteName 属性( 对于模块, 我们不需要远程Name ):

export const APP_ROUTES: Routes = [
    [...]
    {
        path: 'angular1',
        component: WebComponentWrapper,
        data: {
          type: 'module',
          remoteEntry: 'https://your-path/remoteEntry.js',
          exposedModule: './web-components',
          elementName: 'angular1-element'
        } as WebComponentWrapperOptions
    },
    [...]
}

亚室

如果一个网页组件有它自己的路由器,你可以使用我们的 UrlMatchers startsWith 财务报告和审定财务报表 endsWith 定义,用于外壳和微前端的URL的哪一部分:

// Shell
export const APP_ROUTES: Routes = [
    [...]
    {
        matcher: startsWith('angular3'),
        component: WebComponentWrapper,
        data: {
          remoteEntry: 'https://gray-river-0b8c23a10.azurestaticapps.net/remoteEntry.js',
          remoteName: 'angular3',
          exposedModule: './web-components',
          elementName: 'angular3-element'
        } as WebComponentWrapperOptions
    },
    [...]
}

// Micro Frontend
RouterModule.forRoot([
  { path: 'angular3/a', component: AComponent },
  { path: 'angular3/b', component: BComponent },

  // To prevent issues when routing to other micro frontends
  // a catch-all route should be defined
  { path: '**', component: EmptyComponent },
]);

通过模块联合会直接装入网络组件

这个 WebComponentWrapper 也可作为一个传统组成部分:

<mft-wc-wrapper [options]="item"></mft-wc-wrapper>

item: WebComponentWrapperOptions = {
    remoteEntry: 'https://witty-wave-0a695f710.azurestaticapps.net/remoteEntry.js',
    remoteName: 'react',
    exposedModule: './web-components',
    elementName: 'react-element'
},

可选属性 props 财务报告和审定财务报表 events 允许定义网络组件的属性和事件:

props = {
  message: 'Hello from Shell',
};

events = {
  clicked: (event) => {
    console.debug('clicked!', event);
  },
};

<mft-wc-wrapper [options]="item" [props]="props" [events]="events"></mft-wc-wrapper>

其它细节

在多版本的微前端策略中,必须只将区.js捆绑到窗口对象上一次. 另外,还需要确保只有一例ngZone被所有微前端使用.

如果你分享的话 @angular/core 并且因此还有一个对浏览器Platform的技术引用,它被不止一个微缩的frondend所使用,Angular的默认设置是,每个共享版本只支持一个平台实例. 记住你 需求 用于在不同的版本中创建多平台实例,但如果该版本是相同的,则 @angular/core 不共享,而是直接被打包入到微前端的捆绑中(就像Angular默认的w/o模块联邦方式).

自然,这些技术细节很难进入。 因此 bootstrap() 本软件包的功能有助于执行您的多版本战略w/o,即需要单独执行这些低层次方面.

提供了一些可选的旗帜,为自定义行为提供选项 bootstrap() 函数 :

• ngZoneSharing: false: 取消窗口对象中ngZone共享(未推荐):

  bootstrap(AppModule, {
    production: environment.production,
    ngZoneSharing: false, // defaults to true
  });
  

• platformSharing: false: 取消窗口对象中平台共享(未推荐):

  bootstrap(AppModule, {
    production: environment.production,
    platformSharing: false, // defaults to true
  });
  

  • 可能,如果依赖性不共享,或者每个被靴子拖走的远程app使用不同的版本.

• activeLegacyMode: false: 取消为平台共享提供倒向相容性的后传模式:

  bootstrap(AppModule, {
    production: environment.production,
    activeLegacyMode: false, // defaults to true
  });
  

  • 如果您的微前端全部使用 @angular-architects/module-federation-tools 版本中 ^12.6.0, (中文(简体) ), ^13.1.0 或者任何更新的主要版本,你可以手动关闭遗留模式.
  • 这些版本介绍了如何在窗口对象中共享平台的新功能.
  • 这允许使用 bootstrap() 函数,即使在这种情况下,同一版本被打入不同的微前端捆绑.

更多关于基本想法

请进一步了解这方面的基本想法 博客文章。 。 。 .