Error loading remote app with angular 18

[joepeace01]

Hi,

So when I'm trying to connect my shell app to my micro front end using native federation I get this erreor:

I tried to create two new projects in different folder to recreate my architecture, with nothing installed just the based packages and the schematics for ssr and native federation. Then I just copy past the code for the app component and app config of the project exemple you provided.

my package.json:

{
  "name": "remote-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:remoteApp": "node dist/remote-app/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    "@angular-architects/native-federation": "^18.2.3",
    "@angular/animations": "^18.2.13",
    "@angular/common": "^18.2.13",
    "@angular/compiler": "^18.2.13",
    "@angular/core": "^18.2.13",
    "@angular/forms": "^18.2.13",
    "@angular/platform-browser": "^18.2.13",
    "@angular/platform-browser-dynamic": "^18.2.13",
    "@angular/platform-server": "^18.2.13",
    "@angular/router": "^18.2.13",
    "@angular/ssr": "^18.2.12",
    "@softarc/native-federation-node": "^2.0.10",
    "cors": "^2.8.5",
    "es-module-shims": "^1.5.12",
    "express": "^4.18.2",
    "rxjs": "^7.8.1",
    "tslib": "^2.8.1",
    "zone.js": "^0.14.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.2.12",
    "@angular/cli": "~18.2.12",
    "@angular/compiler-cli": "^18.2.13",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~4.0.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~4.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~5.4.5"
  }
}
 

my federation.config:

const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({

  name: 'mfe1',

  exposes: {
    './Component': './src/app/app.component.ts',
  },

  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
  ]

  // Please read our FAQ about sharing libs:
  // https://shorturl.at/jmzH0

});

my main.ts:

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

initFederation()
  .catch(err => console.error(err))
  .then(_ => import('./bootstrap'))
  .catch(err => console.error(err));

angular.json:

{
	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
	"version": 1,
	"newProjectRoot": "projects",
	"projects": {
		"remoteApp": {
			"projectType": "application",
			"schematics": {
				"@schematics/angular:component": {
					"style": "scss"
				}
			},
			"root": "",
			"sourceRoot": "src",
			"prefix": "app",
			"architect": {
				"build": {
					"builder": "@angular-architects/native-federation:build",
					"options": {
						"ssr": true
					},
					"configurations": {
						"production": {
							"target": "remoteApp:esbuild:production"
						},
						"development": {
							"target": "remoteApp:esbuild:development",
							"dev": true
						}
					},
					"defaultConfiguration": "production"
				},
				"serve": {
					"builder": "@angular-architects/native-federation:build",
					"options": {
						"target": "remoteApp:serve-original:development",
						"rebuildDelay": 0,
						"dev": true,
						"port": 0
					}
				},
				"extract-i18n": {
					"builder": "@angular-devkit/build-angular:extract-i18n",
					"options": {
						"buildTarget": "remoteApp:build"
					}
				},
				"test": {
					"builder": "@angular-devkit/build-angular:karma",
					"options": {
						"main": "src/test.ts",
						"polyfills": "src/polyfills.ts",
						"tsConfig": "tsconfig.spec.json",
						"karmaConfig": "karma.conf.js",
						"inlineStyleLanguage": "scss",
						"assets": [
							"src/favicon.ico",
							"src/assets"
						],
						"styles": [
							"src/styles.scss"
						],
						"scripts": []
					}
				},
				"esbuild": {
					"builder": "@angular-devkit/build-angular:application",
					"options": {
						"outputPath": {
							"base": "dist/remote-app"
						},
						"index": "src/index.html",
						"polyfills": [
							"src/polyfills.ts",
							"es-module-shims"
						],
						"tsConfig": "tsconfig.app.json",
						"inlineStyleLanguage": "scss",
						"assets": [
							"src/favicon.ico",
							"src/assets"
						],
						"styles": [
							"src/styles.scss"
						],
						"scripts": [],
						"browser": "src/main.ts",
						"server": "src/main.server.ts",
						"prerender": false,
						"ssr": {
							"entry": "server.ts"
						}
					},
					"configurations": {
						"production": {
							"budgets": [
								{
									"type": "initial",
									"maximumWarning": "500kb",
									"maximumError": "1mb"
								},
								{
									"type": "anyComponentStyle",
									"maximumWarning": "2kb",
									"maximumError": "4kb"
								}
							],
							"fileReplacements": [
								{
									"replace": "src/environments/environment.ts",
									"with": "src/environments/environment.prod.ts"
								}
							],
							"outputHashing": "all"
						},
						"development": {
							"optimization": false,
							"extractLicenses": false,
							"sourceMap": true,
							"namedChunks": true
						}
					},
					"defaultConfiguration": "production"
				},
				"serve-original": {
					"builder": "@angular-devkit/build-angular:dev-server",
					"configurations": {
						"production": {
							"buildTarget": "remoteApp:esbuild:production"
						},
						"development": {
							"buildTarget": "remoteApp:esbuild:development"
						}
					},
					"defaultConfiguration": "development",
					"options": {
						"port": 4201
					}
				}
			}
		}
	}
}

I really didn't add anything, just a new project with your schematics. Only difference is that both projects are in two differents folder instead of having them in one common project like in your example.

And this is the error I get in the terminal for the remote app when trying to run it, the client is displayed correctly when I access to localhost:4201, but the server display an error:

[manfredsteyer]

Can you please provide a reproduction?