Can I get a very simple walkthrough of how to set up module federation for a component

[suityou01]

I am sifting through various blog posts about how to do this and (for me anyways) there is a lot of confusion around how to implement it using nx. Some articles are for webpack, some are for nx.

But, in every case the article in question overcomplicates things by trying to address remote apps and remote components.

Here is what I want

A simple host app that displays a spa that embeds a remote component. That is it.

I have created a repo of where I have got to (this is my 4th attempt today) and I still have so many questions.

https://github.com/suityou01/nx-module-federation-poc

The steps I have followed are

1. Create workspace

npx create-nx-workspace@latest: my-monorepo-name --preset=angular-monorepo

2. Create host application

nx g @nx/angular:host apps/dashboard --prefix=mfe-poc

3. Create remote application

nx g @nx/angular:remote apps/login --prefix=mfe-poc --host=dashboard

4. Create components folder in remote application

mkdir apps/remote/src/app/components

5. Create new standalone component

nx g c app/components/login

6. Add new standalone component to app.routes.ts

import { Route } from '@angular/router';
import { LoginComponent } from './components/login.component';

export const appRoutes: Route[] = [
  {
    path: '',
    loadChildren: () =>
      import('./remote-entry/entry.routes').then((m) => m.remoteRoutes),
  },
  {
    path: 'login',
    compoent:
  }
];

7. Expose new standalone component in modulefederation

import { ModuleFederationConfig } from '@nx/module-federation';

const config: ModuleFederationConfig = {
  name: 'remote',
  exposes: {
    './Routes': 'apps/remote/src/app/remote-entry/entry.routes.ts',
    './Component': 'apps/remote/src/app/components/login.component.ts',
  },
};

/**
 * Nx requires a default export of the config to allow correct resolution of the module federation graph.
 **/
export default config;

So this leaves me with some questions

How can I test this component is being exposed correctly? Can I do this in the browser? What is the url? Is it 'login' as per the route or is it Component as per the ModuleFederationConfig?

My current reading

https://www.angulararchitects.io/en/blog/module-federation-with-angulars-standalone-components/
https://nx.dev/recipes/angular/dynamic-module-federation-with-angular

This is where my brain overheated. How do I get this remote component into my host?

I can see in the first article it is referencing this file "http://localhost:4201/remoteEntry.js" but because the article is a bit dry about how the initial state "Our microfrontend" came into being I cannot understand what this file is for. Certainly nx doesn't create anything similar when I create the remote.

Is there a good book I can buy?
A decent youtube series I can watch?

Currently swimming around in boilerplate wondering which way is up.

Please help.

[suityou01]

Not sure if I am going to get any help on here but I have just pushed some changes to my repo for the remote.

I note that I need to add an assets folder, a manifest json file for the shell app (not documented but in the demo repo linked from the article).

I have the remote app running on localhost:4201 and it serves the entry component, which is progress.

But I added another route

import { Route } from '@angular/router';
import { RemoteEntryComponent } from './entry.component';
import { LoginComponent } from '../components/login.component';

export const remoteRoutes: Route[] = [
  { path: '', component: RemoteEntryComponent },
  { path: 'login/', component: LoginComponent },
];

If I hit localhost:4201 I get the RemoteEntryComponent served as expected.
If I hit localhost:4201/login I get a 404.

I have tried the path with a preceding slash, without, with trailing slash, with both. Nothing works.

I just can't get my head around how this remote works if the routes are not obeyed.

[suityou01]

I swapped the routes so the more specific route occurs first and removes the slashes. Still doesn't work.

[suityou01]

pushed some more changes up. Still not working. I have noticed that I can run the remote on its own by using

nx serve remote

This serves up the root component but all other paths are ignored. Just root component even if you hit the /login path.
Really hoping someone sees this and can help out.