[Native federation] - Shell application getting errors when access exposed micro frontend remote built with Angular 16
geordebg opened this issue · comments
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
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.