So I am trying to make a Native Federation that has an angular application as the shell and loads a node.js app as a remote. The node.js app runs successfully on port 2002. I just can't get the shell to interact with it at all.
federation.config.js file
module.exports = withNativeFederation({
name: 'game',
exposes: {
'./Game': './projects/game/src/nodeapps/testgame/app.js',
},
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
},
skip: [
'rxjs/ajax',
'rxjs/fetch',
'rxjs/testing',
'rxjs/webSocket',
// Add further packages you don't need at runtime
]
});
federation.manifest.json
{
"mfe1": "http://localhost:4201/remoteEntry.json",
"game": "http://localhost:2002/remoteEntry.json"
}
app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NotFoundComponent } from './not-found/not-found.component';
// Add this import:
import { loadRemoteModule } from '@angular-architects/native-federation';
export const APP_ROUTES: Routes = [
{
path: '',
component: HomeComponent,
pathMatch: 'full',
},
// Add this route:
{
path: 'flights',
loadComponent: () =>
loadRemoteModule('mfe1', './Component').then((m) => m.AppComponent),
},
{
path: 'game',
loadComponent: () =>
loadRemoteModule('game', './Game').then((m) => m.app.js),
},
{
path: '**',
component: NotFoundComponent,
},
// DO NOT insert routes after this one.
// { path:'**', ...} needs to be the LAST one.
];
I am guessing the issue is that I don't have the right syntax to load where my node.js is hosted, and its not loading a module but more an http request, but I really can't find an example of someone doing what I am attempting.
Any help would be appreciated.