使用 AWS Amplify、Angular 和模块联合为微前端创建门户

在 Angular 中CLI，输入以下命令：

ng new shell --routing

输入以下命令以导航到项目文件夹：

cd shell

注意：shell 和微前端应用程序的文件夹和项目结构可以完全独立。它们可以作为独立的 Angular 应用程序来处理。

打开环境.ts 文件。

mfe1URL: 'http://localhost:5000'添加到environment对象：

export const environment = {
  production: false,
  mfe1URL: 'http://localhost:5000',
};

保存并关闭环境.ts 文件。

打开 app-routin g.module.ts 文件。

在 Angular 中CLI，输入以下命令从 @angular-architects/module-Federations 插件中导入loadRemoteModule模块：

import { loadRemoteModule } from '@angular-architects/module-federation';

按以下方式设置默认路由：

{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

为微前端设置路由：

{
    path: 'mfe1',
    loadChildren: () => loadRemoteModule({
        type: 'module',
        remoteEntry: `${environment.mfe1URL}/remoteEntry.js`,
        exposedModule: './Module'
      })
      .then(m => m.Mfe1Module)
  },

保存并关闭 app-routin g.module.ts 文件。

在该src文件夹中，创建一个名为 d ecl.d.ts 的新文件。

打开 d ecl.d.ts 文件。

将以下内容添加到文件中：

declare module 'mfe1/Module';

保存并关闭 d ecl.d.ts 文件。

打开主.ts 文件。

将内容替换为以下内容：

import { loadRemoteEntry } from '@angular-architects/module-federation';
 
Promise.all([
    loadRemoteEntry(`${environment.mfe1URL}/remoteEntry.js`, 'mfe1'),
])
.catch(err => console.error('Error loading remote entries', err))
.then(() => import('./bootstrap'))
.catch(err => console.error(err));

保存并关闭主.ts 文件。

打开 app.component.html 文件。

将内容替换为以下内容：

<h1>Shell application is running!</h1>
<router-outlet></router-outlet>

保存并关闭 app.component.html 文件。

在 Angular 中CLI，输入以下命令：

ng new mfe1 --routing

输入以下命令以导航到项目文件夹：

cd mfe1

打开 mfe-routing.module.ts 文件。

按以下方式设置默认路由：

{
    path: '',
    component: Mfe1Component
  },

保存并关闭 mfe-routing.module.ts 文件。

打开 app-routin g.module.ts 文件。

按以下方式设置默认路由：

{
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

添加以下mfe1路线：

{
    path: 'mfe1',
    loadChildren: () => 
      import('./mfe1/mfe1.module').then((m) => m.Mfe1Module),
  },

保存并关闭 app-routin g.module.ts 文件。

打开 webpack.config.js 文件。

编辑该For remotes部分以匹配以下内容：

// For remotes (please adjust)
    name: "mfe1",
    filename: "remoteEntry.js",
    exposes: {
        './Module': './src/app/mfe1/mfe1.module.ts',
    },

在该shared部分中，添加应用程序与 shell mfe1 应用程序共享的所有依赖关系：

shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    
        ...sharedMappings.getDescriptors()
    })

保存并关闭 webpack.config.js 文件。

打开 app.component.html 文件。

将内容替换为以下内容：

<router-outlet></router-outlet>

保存并关闭 app.component.html 文件。

输入以下命令启动mfe1应用程序：

npm start

在 Web 浏览器中，访问http://localhost:5000。

确认微前端可以独立运行。mfe1应用程序应正确呈现，不会出现任何错误。

输入以下命令启动 shell 应用程序：

npm start

在 Web 浏览器中，访问http://localhost:4200/mfe1。

验证mfe1微前端是否嵌入在 shell 应用程序中。门户应用程序应正确呈现，不会出现任何错误，并且mfe1应用程序应嵌入其中。

打开 error-pag e.component.html 文件。

将内容替换为以下内容：

<p>Sorry, this page is not available.</p>

保存并关闭 error-pag e.component.html 文件。

打开 error-page-routing.module.ts 文件。

按以下方式设置默认路由：

{
    path: '',
    component: ErrorPageComponent
  },

保存并关闭 error-page-routing.module.ts 文件。

打开 app-routin g.module.ts 文件。

创建以下函数：

function loadMFE(url: string) {
    return loadRemoteModule({
        type: 'module',
        remoteEntry: `${url}/remoteEntry.js`,
        exposedModule: './Module'
    })
    .then(m => m.Mfe1Module)
    .catch(
        () => import('./error-page/error-page.module').then(m => m.ErrorPageModule)
    );
}

将mfe1路径修改为以下内容：

{
    path: 'mfe1',
    loadChildren: () => loadMFE(environment.mfe1URL)
},

保存并关闭 app-routin g.module.ts 文件。

如果它尚未运行，请输入以下命令来启动 shell 应用程序：

npm start

在 Web 浏览器中，访问http://localhost:4200/mfe1。

验证错误页面是否已呈现。您应该会看到以下文本：

Sorry, this page is not available.

在 Amplify 中CLI，导航到微前端应用程序的根文件夹。

输入以下命令来初始化 Amplify：

amplify init

当系统提示你输入 Amplify 项目的名称时，请按 Enter。这会重复使用 p ackage.js on 文件中的名称。

当系统提示您使用上述配置初始化项目时，请输入Yes。

当系统提示您选择身份验证方法时，选择AWS Profile。

选择要使用的配置文件。

等待 Amplify 初始化项目。此过程完成后，您将在终端中收到一条确认消息。

输入以下命令将 Amplify 托管类别添加到微前端：

amplify add hosting

当系统提示您选择插件模块时，选择Hosting with Amplify Console。

当系统提示您选择类型时，选择Manual deployment。

输入以下命令安装项目 npm 依赖项：

npm install

输入以下命令，将应用程序发布到 Amplify 控制台：

amplify publish -y

发布完成后，Amplify 会返回微前URL端的。

复制URL. 你需要这个值来更新 shell 应用程序。

在 src/app/environments 文件夹中，打开 environmen ts.prod.ts 文件。

将该mfe1URL值替换为已部署URL的微前端的值：

export const environment = {  
   production: true, 
   mfe1URL: 'https://<env>.<Amplify-app-ID>.amplifyapp.com'
 };

保存并关闭 envir onments.prod.ts 文件。

在 Amplify 中CLI，导航到外壳应用程序的根文件夹。

输入以下命令来初始化 Amplify：

amplify init

当系统提示你输入 Amplify 项目的名称时，请按 Enter。这会重复使用 p ackage.js on 文件中的名称。

当系统提示您使用上述配置初始化项目时，请输入Yes。

当系统提示您选择身份验证方法时，选择AWS Profile。

选择要使用的配置文件。

等待 Amplify 初始化项目。此过程完成后，您将在终端中收到一条确认消息。

在外壳应用程序中添加 Amplify 托管类别：

amplify add hosting

当系统提示您选择插件模块时，选择Hosting with Amplify Console。

当系统提示您选择类型时，选择Manual deployment。

输入以下命令安装项目 npm 依赖项：

npm install

输入以下命令，将外壳应用程序发布到 Amplify 控制台：

amplify publish -y

发布完成后，Amplify 会返回已部署URL的外壳应用程序的。

记下适用URL于 shell 应用程序的。

在 Amplify 中CLI，导航到微前端的根文件夹。

输入以下 命令：

amplify configure hosting

当系统提示您配置自定义设置时，请输入Y。

登录 AWS Management Console，然后打开 Amplify 控制台。

选择微前端。

在导航窗格中，选择托管，然后选择自定义标题。

选择编辑。

在编辑自定义标题窗口中，输入以下内容：

customHeaders:
  - pattern: '*.js'
    headers:
      - key: Access-Control-Allow-Origin
        value: '*'
      - key: Access-Control-Allow-Methods
        value: 'GET, OPTIONS'
      - key: Access-Control-Allow-Headers
        value: '*'

选择保存。

重新部署微前端以应用新的自定义标头。

在 Amplify 中CLI，导航到外壳应用程序的根文件夹。

输入以下 命令：

amplify configure hosting

当系统提示您配置自定义设置时，请输入Y。

打开 Amplify 控制台。

选择外壳应用程序。

在导航窗格中，选择托管，然后选择重写和重定向。

在 “重写和重定向” 页面上，选择 “管理重定向”。

选择 “打开文本编辑器”。

在JSON编辑器中，输入以下重定向：

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

选择保存。

在 Web 浏览器中，输入已部署URL的 shell 应用程序的。

验证 shell 应用程序和微前端是否正确加载。

登录 AWS Management Console，然后打开 Amplify 控制台。

选择微前端。

在导航窗格中，选择应用程序设置，然后选择常规设置。

选择 “删除应用程序”。

在确认窗口中，输入delete，然后选择删除应用程序。

重复这些步骤以删除 shell 应用程序。