用角模块倾斜前线 - federation-第2部分-DEV365 开发者社区

必要的工具：

让我们继续实现我们的应用程序，打开mfe-1文件夹中的终端，然后运行以下命令安装模块 - 文件lib并配置应用程序webpack。br>

ng add @angular-architects/module-federation --project mfe-1 --port 4201 --type remote --skip-confirmation

类型代码后不久。打开Vscode并查看我们应用程序的代码。

更改代码中的以下文件。
app.component.html

<h1>Aqui e o Mfe-1</h1>

app.module.ts

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

详细信息我们看到我们传递了该模块的重要性 Commocule ，因为该应用程序的这个模块和我们应用程序主机的模块。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const MFE1_ROUTES: Routes = [
  {
    path: '',
    component: AppComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(MFE1_ROUTES)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

也在这里的另一个细节，我们以 routermodule.forchild 在Routmodule中传递，因为此路线将是我们应用程序主机的根路线的女儿。
webpack.config.js

const {
  shareAll,
  withModuleFederationPlugin,
} = require("@angular-architects/module-federation/webpack");

module.exports = withModuleFederationPlugin({
  name: "mfe-1",

  exposes: {
    "./Module": "./src/app/app.module.ts",
  },

  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
 },
});

在终端上完成以下命令以运行npm run start应用程序并转到我们的主机并单击Koud6链接，我们可以看到通过主机访问我们的MFE。

按照创建MFE-2项目的文件夹内的相同步骤，但是要安装模块 - 封面lib并配置WebPack在终端上输入以下命令。
ng add @angular-architects/module-federation --project mfe-2 --port 4202 --type remote --skip-confirmation
此后调整以下文件以使其看起来像这样。
更改代码中的以下文件。

app.component.html

<h1>Aqui e o Mfe-2</h1>

app.module.ts

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

详细信息我们看到我们传递了该模块的重要性 Commocule ，因为该应用程序的这个模块和我们应用程序主机的模块。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const MFE2_ROUTES: Routes = [
  {
    path: '',
    component: AppComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(MFE2_ROUTES)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

也在这里的另一个细节，我们以 routermodule.forchild 将其传递给我们的Routermodule。

webpack.config.js

const {
  shareAll,
  withModuleFederationPlugin,
} = require("@angular-architects/module-federation/webpack");

module.exports = withModuleFederationPlugin({
  name: "mfe-2",

  exposes: {
    "./Module": "./src/app/app.module.ts",
  },

  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
 },
});

在终端上完成以下命令以运行npm run start应用程序并转到我们的主机，然后单击Acesse Mfe-2链接，我们可以看到通过主机访问我们的MFE。

现在，每次点击链接时，我们都可以远程访问我们的mfe-1和mfe-2应用程序，例如，可以使我们进行更改并爬上MFE-1应用程序中的部署，而无需干扰应用程序MFE-2，以完全完全独立代码。

这只有过去的知识，我会把它留在我的github中，对于那些想访问该项目的人

我也留在这里©m我的linkedin，为那些想加我的人，感谢阅读本文并让我们学习家伙的每个人。
*观察： *作为第三部分中的一个加号，我将挑战自己，使用模块 - 方向构建一个角度组件，以用作应用程序中使用的组件lib，示例在所有应用程序中使用标准的botan使用，并在此处共享第三部分。