Native federation v22 (softarc/native-federation-runtime)

[pavloLivinovskyi]

Hi team,

I tried upgrading to v22 and switching to the new orchestrator as described in the docs. However, I couldn't figure out how to make it work with dynamic remotes (as opposed to a static manifest).
In the new initFederation function (imported via import { initFederation } from '@softarc/native-federation-runtime';), the manifest appears to be required.
Do we have a working example of this, or is dynamic remote support being deprecated?
Thanks in advance!

[zoroaster00]

+1 on this

[Aukevanoost]

Hi! no dynamic remote support is still very much alive! We've provided a small helper function in the angular adapter (source). It works a bit like this:

import {
  initFederation,
  NativeFederationResult,
} from '@angular-architects/native-federation';

// first argument is the URL to, or object of the manifest.
initFederation()
  .then((nf: NativeFederationResult) => {
    console.log(nf.config);
    return import('./bootstrap').then((m: any) => m.bootstrap(nf));   // passing the nf reference to the bootstrap
  })
  .catch((err) => console.error(err));

closest example: https://github.com/native-federation/playground/blob/main/angular/tractor-store/projects/host/src/main.ts

This does mean you'll need to modify your bootstrapper a bit:

import { createApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { createCustomElement } from '@angular/elements';
import { EnvironmentConfig } from './config/environment.config';
import { NativeFederationResult } from '@angular-architects/native-federation';

export async function bootstrap(env: NativeFederationResult) {
  await createApplication(appConfig(nf)).then(({ injector }) =>
    customElements.define(
      'di-form-overview',
      createCustomElement(AppComponent, { injector }),
    ),
  );
}

And finally, add the loader to an injection token

import {
  ApplicationConfig,
  InjectionToken,
  provideZonelessChangeDetection,
} from '@angular/core';
import { provideRouter } from '@angular/router';
import { NativeFederationResult } from '@softarc/native-federation-orchestrator';
import { routes } from './app.routes';

export const MODULE_LOADER = new InjectionToken<NativeFederationResult>(
  'loader',
);

export const appConfig = (nf: NativeFederationResult): ApplicationConfig => ({
  providers: [
    { provide: MODULE_LOADER, useValue: nf },
    provideZonelessChangeDetection(),
    provideRouter(routes(nf)),
  ],
});

source: https://github.com/native-federation/playground/blob/main/angular/simple/projects/host/src/app/app.config.ts

This is really cool because you can also lazy init remotes like this:

import { Type } from '@angular/core';
import { Routes } from '@angular/router';
import { NativeFederationResult } from '@softarc/native-federation-orchestrator';

export const routes = ({ initRemoteEntry }: NativeFederationResult): Routes => [
  {
    path: 'mfe3',
    loadComponent: () =>
      initRemoteEntry('http://localhost:4203/remoteEntry.json', 'mfe3')
        .then((nf) =>
          nf
            .as<{ AppComponent: Type<unknown> }>()
            .loadRemoteModule('mfe3', './Component'),
        )
        .then((m) => m.AppComponent),
  }
];

source:

playground/angular/simple/projects/host/src/app/app.routes.ts

Lines 6 to 16 in 3d17c2f

	{
	path: 'mfe3',
	loadComponent: () =>
	initRemoteEntry('http://localhost:4203/remoteEntry.json', 'mfe3')
	.then((nf) =>
	nf
	.as<{ AppComponent: Type<unknown> }>()
	.loadRemoteModule('mfe3', './Component'),
	)
	.then((m) => m.AppComponent),
	},

Hope this helps! Let me know if you have any further questions

[zoroaster00]

hey thanks for the quick response! In our use cases we are looking for something similar to:
import { setRemoteUrlResolver } from '@nx/angular/mf';
I will see if we can use initRemoteEntry to refactor our scenarios, thanks!

[pavloLivinovskyi]

thanks, now I figured out new architecture

[sephie]

I've been wrapping my head around the new setup for native federation for a private PoC, and the use of useShimImportMap had me running in circles.

Like here in the playground repo.

I lost the plot when following the runtime guide, since this part of the config is made to seem like it's not needed when changing from the 1st snippet to the 2nd.

This is mainly a heads-up for @Aukevanoost, in case you agree about the clarification.

[Aukevanoost]

Hi @sephie, Thanks for this. I've updated the docs website a bit. Note that it's still a bit of a WIP.

https://native-federation.com/docs/v4/angular-adapter/runtime/