动态@转角-架构师/模块-联合与多个repo (主机回购，远程回购)，没有显示远程MFE应用程序内容在主机应用程序。

Question

我使用的是角v14.1.1。我有两个回购主机应用和远程应用。我试图应用模块-联邦插件在每个回购项目。但面临的问题似乎是远程应用程序remoteEntry.js加载在网络上，但内容没有显示在UI中。

Repo1:远程应用程序配置：

webpack.config.js

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.base.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "remotemfe1",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },

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

        // },

        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()
        })
        
    }),
    sharedMappings.getPlugin()
  ],
};

app.module.ts

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

import { TestComponent } from './app.component';

@NgModule({
  declarations: [TestComponent],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [TestComponent],
})
export class AppModule {}

Repo2:主机应用程序配置：

webpack.config.js

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.base.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "hostmf",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },

        // For remotes (please adjust)
        // name: "hostmf",
        // filename: "remoteEntry.js",
        // exposes: {
        //     './Component': './apps/hostmf/src/app/app.component.ts',
        // },        
        
        // For hosts (please adjust)
        // remotes: {
        //     "remotemfe1": "http://localhost:3000/remoteEntry.js",
        // },

        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()
        })
        
    }),
    sharedMappings.getPlugin()
  ],
};

主机应用程序app.module.ts

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

import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/module-federation';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: 'remotemfe1',
        loadChildren: () =>
            loadRemoteModule({
                type: 'module',
                remoteEntry: 'http://localhost:4201/remoteEntry.js',
                exposedModule: './Module'
            })
            .then(m => {
              console.log(m);
              return m.AppModule;
            })
    }
    ]),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}


//**app.component.ts**

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

@Component({
  selector: 'hostrepo-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'hostmf';
}

app.component.html

host app works!
<router-outlet></router-outlet>

主机应用index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hostmf</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <hostrepo-root></hostrepo-root>
  </body>
</html>

运行在http://localhost:4200和远程应用程序http://localhost:4201上的主机应用程序

问题:当我尝试在UI中加载http://localhost:4200/remotemfe1时，只显示主机应用程序工作！没有远程应用程序内容，但在开发工具网络选项卡remoteEntry.js文件中正在加载。

有什么问题吗？如何解决问题。你能帮忙吗？谢谢。

Answer 1

可能还有其他解决方案可用，但我得到了解决方案，比如在远程MFE应用程序RouteModule.forChild中添加了imports。MFEs应用程序内容显示在主机应用程序。

 RouterModule.forChild([{
      path:'',
      component:TestComponent
    }])