[Native federation] - Shell application getting errors when access exposed micro frontend remote built with Angular 16

[geordebg]

Hello team,

We are working on a PoC tass for building a shell app with Angular 13 and a remote app, built with Angular 16. Shell app: https://github.com/geordebg/microfe-shell Remote ng v16 with standalone components: https://github.com/geordebg/angular16 Remote ng17: https://github.com/geordebg/mfe1

When built the exposed modules from the remote app with the angular 16 . And trying to access it via the shell app routes I am getting the errors below. Here are the defined routes in the shell:

export const APP_ROUTES: Routes = [
  {
    path: 'flights',
    loadChildren: () => loadRemoteModule('mfe1', './routes').then((m) => m.APP_ROUTES)
  },
  {
    path: 'packages',
    loadChildren: () => loadRemoteModule('angular16', './routes').then((m) => m.routes)
  },
  {
    path: 'app',
    loadChildren: () => loadRemoteModule('angular16', './Holidays').then((m) => m.HolidaysComponent)
  },
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'web-components',
    component: WrapperComponent,
    data: {
      config: {
        remoteName: 'mfe1',
        exposedModule: './WebComponents',
        elementName: 'web-components',
      } as WrapperConfig
    }
  }
];

And they are used in the HomeComponent:

  navigateToNG16(): void {
    this.router.navigateByUrl('packages/new-package');
  }

  navigateToApp(): void {
    this.router.navigateByUrl('app');
  }

• When accessing the route this.router.navigateByUrl('packages/new-package'),the console error is:

• For the second route this.router.navigateByUrl('app'); I am getting:

What could be missed in the remote angular 16 application?

Kind regards, Desislava

[manfredsteyer]

Hi,

if you want to mix and match different Angular versions, you need to wrap the mfes into web components (or other abstractions) and load them via a wrapper.