Assets folder in Angular Micro Front-end module-federation Remote App causing 404 errors in Host App

130 Views Asked by At

I'm encountering an issue with an Angular micro front-end setup using Module Federation. My remote app has an assets folder containing fonts, and I'm facing 404 errors when trying to load these assets from the host app. The challenge is that I don't want to add the assets folder to the host app.

Issue:

The fonts located in the assets folder of the remote app are not found by the host app, resulting in 404 errors.

Here's a simplified version of my webpack configuration for the remote app:

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

const webpackConfig =  withModuleFederationPlugin({
  name: 'shareholders',
  exposes: {
    './PagesModule': './src/app/pages/pages.module.ts',
  },

  shared: share({
    '@angular/core': { singleton: true, strictVersion: true, requiredVersion: '15.2.10' },
    '@angular/common': { singleton: true, strictVersion: true, requiredVersion: '15.2.10'  },
    '@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: '15.2.10'  },
    '@angular/compiler': { singleton: true, strictVersion: true, requiredVersion: '15.2.10' },
    '@angular/platform-browser': { singleton: true, strictVersion: true, requiredVersion: '15.2.10' },
    '@angular/platform-browser-dynamic': { singleton: true, strictVersion: true, requiredVersion: '15.2.10' },
    '@angular/router': { singleton: true, strictVersion: true, requiredVersion: '15.2.10'  },
    '@angular/forms': { singleton: true, strictVersion: true, requiredVersion: '15.2.10' },
    '@angular/animations': { singleton: true, strictVersion: true, requiredVersion: '15.2.10' },

  }),


});

module.exports = webpackConfig

I would like to know how I can resolve the 404 errors for assets (fonts) in the remote app without adding the assets folder to the host app. Are there specific webpack configurations or strategies I can use to ensure that these assets are correctly loaded from the remote app?

Thank you for any assistance or suggestions!

0

There are 0 best solutions below