如何在角度模块联合中从远程向 shell 应用程序提供资产

Question

我已经为我的角度应用程序实现了角度模块联合（微前端），但面临着远程应用程序中可用的 svg 图标的渲染问题（损坏）。但是当我单独运行远程应用程序时，这些 svg 图标正在工作我们如何从远程加载/提供资源图像/文件到 shell 应用程序？我面临的另一个问题是角度材料无法正确渲染，例如当单击下拉菜单并选择任何选项时，它不会隐藏。 下面是我的svg图标相关代码

import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';
import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class IconService {

  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
  }

  public registerIcons(): void {
    this.loadIcons(Object.values(Icons), './assets/svg/');
  }

  private loadIcons(iconKeys: string[], iconUrl: string): void {
    iconKeys.forEach(key => {
      this.matIconRegistry.addSvgIcon(key, this.domSanitizer.bypassSecurityTrustResourceUrl(`${iconUrl}/${key}.svg`))
    });
  }
}

export enum Icons {
  DeleteIcon = 'DeleteIcon',
  DownloadIcon = 'DownloadIcon',
  EditIcon = 'EditIcon',
  UploadIcon = 'UploadIcon',

} 

HTML：

 <mat-icon svgIcon="UploadIcon" class="image-upload-icon-sizing" (click)="fileUploadInput.click()" *ngIf="imgSourceError"></mat-icon>

Shell 应用程序 Web 配置：

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
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.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "parent",
    publicPath: 'http://localhost:4400/'
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },

        // For remotes (please adjust)
        // name: "parent",
        // filename: "remoteEntry.js",
        // exposes: {
        //     './Component': './projects/parent/src/app/app.component.ts',
        // },        loadRemoteEntry
        
        // For hosts (please adjust)
        remotes: {
            "contentEditorTestApp": "http://localhost:4222/remoteEntry.js",
        },

        shared: share({
          "@ngrx/store": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@ngrx/effects": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@ngrx/store-devtools": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
          "@angular/core": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@angular/common": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@angular/common/http": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@angular/router": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
          "@angular/material": {eager:true,singleton: true, strictVersion: false, requiredVersion: 'auto',includeSecondaries: true},
          "@angular/cdk": {eager:true,singleton: true, strictVersion: false, requiredVersion: 'auto',includeSecondaries: true},
          "@angular/forms": {eager:true,singleton: true, strictVersion: false, requiredVersion: 'auto',includeSecondaries: true},
          ...sharedMappings.getDescriptors()
        })
        
    }),
    sharedMappings.getPlugin()
  ],
};

远程应用程序Web配置：

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.json'),
  [/* mapped paths to share */]);

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

        // For remotes (please adjust)
        name: "contentEditorTestApp",
        filename: "remoteEntry.js",
        exposes: {
            './Module': './projects/content-editor-test-app/src/app/assets/asset.module.ts',
        },        
        
        // For hosts (please adjust)
        // remotes: {
        //     "mfe1": "http://localhost:3000/remoteEntry.js",

        // },

        shared: share({
          "@ngrx/store": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@ngrx/effects": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@ngrx/store-devtools": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
          "@angular/core": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@angular/common": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@angular/common/http": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@angular/router": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
          "@angular/material/tabs":{singleton: true, strictVersion: false, requiredVersion: 'auto'},
          "@angular/material/list":{singleton: true, strictVersion: false, requiredVersion: 'auto'},
          "@angular/material/icon":{singleton: true, strictVersion: false, requiredVersion: 'auto'},
          "@angular/material/input":{singleton: true, strictVersion: false, requiredVersion: 'auto'},
          "@angular/material/form-field":{singleton: true, strictVersion: false, requiredVersion: 'auto'},
          "@angular/material/select":{singleton: true, strictVersion: false, requiredVersion: 'auto'},
          "@angular/cdk": {singleton: true, strictVersion: false, requiredVersion: 'auto',includeSecondaries: true},
          "@angular/forms": {singleton: true, strictVersion: false, requiredVersion: 'auto',includeSecondaries: true},
          ...sharedMappings.getDescriptors()
        })
        
    }),
    sharedMappings.getPlugin()
  ],
};

Answer 1

作为解决方法，我通过将资产图像移动到远程和 Shell 应用程序中的公共文件夹来解决此问题。现在，两个应用程序在公共文件夹下具有相同的资产，这解决了集群和本地（对于独立运行的应用程序）中的问题。