在角微前端的所有远程应用程序都需要在同一个角度的工作空间中吗？

Question

我知道在单个角度工作区中可以有多个角度应用程序，就像加载到shell角应用程序中的遥控器一样，但是您可以拥有多个不位于同一个工作区中的角应用程序吗？我们在不同的存储库中有应用程序，所以它们不在同一个工作区中。

--主机应用程序webpack.config.js --

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

module.exports = withModuleFederationPlugin({

  remotes: {
    "appOne": "http://localhost:4201/remoteEntry.js",    
    "appTwo": "http://localhost:4202/remoteEntry.js",    
  },

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

});

--主机应用程序main.ts --

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

import('./bootstrap')
    .catch(err => console.error(err));

    Promise.all([
        loadRemoteEntry('http://localhost:4201', 'appOne'),
        loadRemoteEntry('http://localhost:4202', 'appTwo'),
    ])
        .catch((err) => console.error('Error loading remote entries', err))
        .then(() => import('./bootstrap'))
        .catch((err) => console.error(err));    

--主机应用程序-routing.module.ts(仅限路线)--

export const APP_ROUTES: Routes = [
  {
    path: '',
    component: HomeComponent,
    pathMatch: 'full'
  },
  {
    path: 'app-one',
    loadChildren: () => loadRemoteModule({
                            remoteName: 'appOne',
                            exposedModule: './appOne',
                        }).then((m) => m.AppOneModule)
  },
  {
    path: 'app-two',
    loadChildren: () => loadRemoteModule({
                            remoteName: 'appTwo',
                            exposedModule: './appTwo',
                        }).then((m) => m.AppTwoModule)
  }
];

--远程应用程序ONE webpack.config.js --

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

module.exports = withModuleFederationPlugin({

  name: 'appOne',

  exposes: {
    './appOne': './projects/app-one/src/app/app-one/app-one.module.ts',
  },

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

});

-远程应用程序-一个应用程序

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

import { AppOneComponent } from './app-one.component';
import { AppOneRoutingModule } from './app-one-routing-module';

@NgModule({
    declarations: [AppOneComponent],
    imports: [CommonModule, AppOneRoutingModule]
})
export class AppOneModule {}

-远程应用程序一应用-单路由-模块- APP

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppOneComponent } from './app-one.component';

const routes: Routes = [{ path: '', component: AppOneComponent }];

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

Answer 1

在所有角项目(shell和remotes)中激活模块联合()

要做到这一点，您可以通过以下命令使用schematic @ar角-architects/模块联合：

ng add @angular-architects/module-federation

这将在不同的文件中生成必要的配置：

- src/bootstrap.ts (bootstrap of AppModule)
- src/main.ts (import bootstrap)
- webpack.config.js (skeleton to use module federation)
- webpack.prod.config.js (skeleton to use module federation)

Shell

shell应用程序将使用路由器来延迟加载远程模块(remote1、remote2)。

export const APP_ROUTES: Routes = [
 {
   path: '',
   component: HomeComponent,
   pathMatch: 'full'
 },
 {
   path: 'remote1',
   loadChildren: () => loadRemoteModule({
                           remoteName: 'remote1App',
                           exposeModule: './Remote1',
                       }).then((m) => Remote1Module)
 },
];

因此，这个Remote1Module模块不是shell项目的一部分。

您的main.ts file将如下所示：

Promise.all([
    loadRemoteEntry('https://url_remote1', 'remote1App'),
    loadRemoteEntry('https://url_remote2', 'remote2App'),
])
    .catch((err) => console.error('Error loading remote entries', err))
    .then(() => import('./bootstrap'))
    .catch((err) => console.error(err));

因此，在这里，您正在尝试用他的url和名称加载远程应用程序。名称必须是要在路由(remoteName: 'remote1App')中使用的名称的引用。

微前端项目(又名远程)

假设我们在remote1项目中，其中有一个名为remote1的模块，这个模块包含了我们希望在Shell应用程序中公开的功能。为了完成这一工作，我们需要在Remote1Module项目webpack中曝光remote1。

module.export = {
    ...
    plugins: [
        new ModuleFederationPlugin({
            name: 'remote1',
            filename: 'remoteEntry.js',
            exposes: {
                './remote1App': './src/app/remote1.module.ts'
            }
        }),
        shared: share({
            ...
        })
    ]
}

此配置以公共名称Remote1Module remote1App公开。您还可以使用共享部分与Shell应用程序共享一些包。

试用

您可以先运行您的远程应用程序，然后再运行您的shell，但这个命令是不必要的。我建议你避免犯错误

错误加载远程条目..。

ng serve remote1App
ng serve shell

所有的信用给曼弗雷德斯蒂尔 (https://www.angulararchitects.io/en/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/)

Answer 2

如果不使用单回购方法，则需要在所有的角度项目中设置模块联合。