2

I am trying to implement dynamic module federation where I have a host application and few remote applications. Let's assume I have hyperlinks remote1 on my host App and when I click on remote1 link, I will dynamically load remote application App1 at that placeholder. But, suppose my remote application is down and if I click on hyperlink- remote1, It's throwing console errorstrong text

Error:Uncaught(in promise):TypeError:Failed to fetch dynamically imported module: http://localhost:3000/remoteentry.js

This is how I am importing my remote module:

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

const routes: Routes = [
    
    {
        path: 'remote1',
        loadChildren: () =>
            loadRemoteModule({
                type: 'module',
                remoteEntry: 'http://localhost:3000/remoteEntry.js',
                exposedModule: './Module'
            })
            .then(m => m.RemoteModule)
    },
];

Is there a way to handle this error when a remote application is down and when I click on that link I should be able to redirect to another page where I can display a message that remote App is down?

Soadiya
  • 21
  • 1
  • 3
  • can anyone help here https://stackoverflow.com/questions/75958591/nx-mfe-angular-module-federation-not-able-to-access-remote-micro-front-end – Pranav MS Apr 10 '23 at 22:15

1 Answers1

2

You can load another module if there is an error during remote module load by using the catch block of promise returned by loadRemoteModule.

loadRemoteModule({
     type: 'module',
      remoteEntry: 'http://localhost:3000/remoteEntry.js',
       exposedModule: './Module'
 })
 .then(m => m.RemoteModule)
 .catch(e => {
    return import('src/app/placeholder/placeholder.module').then(m => m.PlaceHolderModule);
 })

And, you can create a PlaceHolderModule in shell app - whose default route will load a component with message indicating that Sorry! Something went wrong. Click refresh to retry

Wand Maker
  • 18,476
  • 8
  • 53
  • 87