Lazy loading using module federation in angular without shell application?

Question

I want to achieve the lazy loading using module federation without shell application using angular 16.

I configuring the module federation like this -

new ModuleFederationPlugin({ 
   name: 'myapp',
   filename: 'remoteEntry.js',
    exposes: {
       route1: './src/routes/route1.module.ts',
       route2: './src/routes/route2.module.ts'
    },
    remotes: {
       myApp: 'myApp'
    }
})

Defining the routes like this -

export const appRoutes: Route[] = [
  {
     path: 'route1',
     loadChildren: () => 
       loadRemoteModule({
           type: 'module',
           remoteEntry: "http://localhost:8080/remoteEntry.js", 
           exposedModule: "route1"
        }).then(m => m.Route1Module)
  },
  {
     path: 'route2',
     loadChildren: () => 
       loadRemoteModule({
           type: 'module',
           remoteEntry: "http://localhost:8080/remoteEntry.js", 
           exposedModule: "route2"
        }).then(m => m.Route2Module)
  }
]

This will create remoteEntry.js files as well but the lazy loading is not working. Getting below error when clicked on lazy route.

Answer 1

To fix the issue with lazy loading not working, you can try changing Route1Module to Route2Module in the second route definition.

I hope this helps. Let me know if you have any further questions.