Version Mismatch Issues

[spalakurla-ort]

For which library do you have a feature request?

native-federation

Information

Hi,
I am working on micro front end application where I have MFE Host and couple MFEs. And I have couple packages(core/ui/shell) which are shared across both MFE Host and MFEs.
So the problem is, when my Host use higher version of these packages and MFEs use lower version of these shared packages, when I load MFE in the host it does not load. It does not give error either.

Examples:
"@agency/core": "^1.0.10"
"@agency/shell": "^1.0.10"
"@agency/ui": "^1.0.9" I have these packages in my MFE Host

"@agency/core": "^1.0.2",
"@agency/shell": "^1.0.9",
"@agency/ui": "^1.0.9" I have these in my MFE

Due to this , I'm unable to load MFEs in Host.

I'm using "@angular-architects/native-federation": "^19.0.22"

Below is my federation.config.js for HOST:

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

module.exports = withNativeFederation({
	shared: {
		...shareAll({
			singleton: true,
			strictVersion: false,
			requiredVersion: 'auto',
		}),

		'@agency/core': {
			singleton: true,
			strictVersion: false,
			requiredVersion: ">=1.0.0 <2.0.0"
		},
		'@agency/shell': {
			singleton: true,
			strictVersion: false,
			requiredVersion: ">=1.0.0 <2.0.0"
		},
		'@agency/ui': {
			singleton: true,
			strictVersion: false,
			requiredVersion: ">=1.0.0 <2.0.0"
		}
	}
});

Below is federation.config.js for MFE:

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

module.exports = withNativeFederation({
	name: "orders",

	exposes: {
		"./orders": "./src/app/orders/orders.routes.ts",
		"./demo": "./src/app/demo/demo.routes.ts",
	},

	shared: {
		'@agency/core': {
			singleton: true,
			strictVersion: false,
			requiredVersion: ">=1.0.0 <2.0.0"
		},
		'@agency/shell': {
			singleton: true,
			strictVersion: false,
			requiredVersion: ">=1.0.0 <2.0.0"
		},
		'@agency/ui': {
			singleton: true,
			strictVersion: false,
			requiredVersion: ">=1.0.0 <2.0.0"
		},

		...shareAll({
			singleton: true,
			strictVersion: false,
			requiredVersion: 'auto',
		}),
	}
});

Let me know If I need to share anything else. Please help me resolve.

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[Aukevanoost]

Hi @spalakurla-ort,

This is a hard one to answer since I don't know what the code is or expected result, but also here, note that the dependency sharing only works when the versions exactly match, you can find more info in #1009.

[spalakurla-ort]

Our Expectation is that, though the Host use higher version(patch) of shared packages and MFE use lower version(patch) of packages, Host should still be able to load the MFE components.

[spalakurla-ort]

I see this article says, we can have shared packages with different versions:
https://www.angulararchitects.io/en/blog/getting-out-of-version-mismatch-hell-with-module-federation/

For my application:
I have Host application which uses couple shared packages(core/ui/shell)
Also I use the same packages in MFE as well.

e.g. version in Host
"@ort-agency/core": "^1.0.10",
"@ort-agency/shell": "^1.0.10",
"@ort-agency/ui": "^1.0.9",

e.g. version in MFE
"@ort-agency/core": "^1.0.2",
"@ort-agency/shell": "^1.0.9",
"@ort-agency/ui": "^1.0.9"

Since I have lower patch version in MFE, when I try to load MFE from Host, the component loads fine, but the services/components form the shared packages are not functioning. Whatever shared packages I used in MFE, they don't function in when I try loading MFE in Host. It does not show error either.

I'm using below code for loading MFE on Host:

loadChildren: () =>
							loadRemoteModule({
								remoteName: resource.remoteName,
								exposedModule: resource.exposedModule,
								remoteEntry: `${resource.baseUrl}remoteEntry.json`
							}).then(m => m[resource.moduleName])

And I exposed the routes/components in MFE as below:

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

module.exports = withNativeFederation({
	name: "orders",
	exposes: {
		"./orders": "./src/app/orders/orders.routes.ts",
		"./demo": "./src/app/demo/demo.routes.ts",
	},
	shared: {
		...shareAll({ singleton: true, strictVersion: false, requiredVersion: "auto" })
	}
});

[Aukevanoost]

I see this article says, we can have shared packages with different versions:
https://www.angulararchitects.io/en/blog/getting-out-of-version-mismatch-hell-with-module-federation/

Yes but unfortunately this is module federation, not native federation. The vanilla-native-federation drop-in replacement does provide parity for these features but it's not in the ecosystem yet.

With the current @softarc/native-federation-runtime that you are using, dependencies are not shared per version range but rather per exact version, hence the library loaded by e.g. your microfrontend receives a different version of Angular and thus a different injection context.

[spalakurla-ort]

Hi Team,

I tried switching from native federation to module federation.
I'm sharing the files which I am using currently:

package.json
{
  "name": "orders",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "prestart": "node aspnetcore-https",
    "start": "run-script-os",
    "start:windows": "ng serve",
    "start:default": "ng serve",
    "build": "ng build",
    "build:prod": "ng build -c production",
    "watch": "ng build --watch -c development",
    "lint": "ng lint",
    "test": "ng test --no-watch",
    "test:headless": "ng test --no-watch --browsers=ChromeHeadless",
    "run:all": "node node_modules/@angular-architects/module-federation/src/server/mf-dev-server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^19.2.14",
    "@angular/common": "^19.2.14",
    "@angular/compiler": "^19.2.14",
    "@angular/core": "^19.2.14",
    "@angular/forms": "^19.2.14",
    "@angular/localize": "^19.2.14",
    "@angular/platform-browser": "^19.2.14",
    "@angular/platform-browser-dynamic": "^19.2.14",
    "@angular/router": "^19.2.14",
    "@fortawesome/angular-fontawesome": "^1.0.0",
    "@fortawesome/free-solid-svg-icons": "^6.5.2",
    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
    "@okta/okta-angular": "^6.4.0",
    "@ort-agency/core": "^1.0.2",
    "@ort-agency/shell": "^1.0.9",
    "@ort-agency/ui": "^1.0.9",
    "@progress/kendo-angular-dateinputs": "^18.0.0",
    "@progress/kendo-angular-grid": "^18.0.0",
    "@progress/kendo-angular-inputs": "^18.0.0",
    "@progress/kendo-angular-tooltip": "^18.0.0",
    "@progress/kendo-licensing": "^1.5.0",
    "@progress/kendo-theme-bootstrap": "8.0.1",
    "es-module-shims": "^1.5.12",
    "rxjs": "~7.8.0",
    "tslib": "^2.6.3",
    "zone.js": "~0.15.1"
  },
  "devDependencies": {
    **"@angular-architects/module-federation": "^19.0.3",**
    "@angular-devkit/build-angular": "^19.2.14",
    "@angular-eslint/builder": "^19.0.0",
    "@angular-eslint/eslint-plugin": "^19.0.0",
    "@angular-eslint/eslint-plugin-template": "^19.0.0",
    "@angular-eslint/schematics": "^19.0.0",
    "@angular-eslint/template-parser": "^19.0.0",
    "@angular/cli": "~19.2.14",
    "@angular/compiler-cli": "^19.2.14",
    "@progress/kendo-licensing": "^1.5.0",
    "@types/jasmine": "^5.1.5",
    "@types/node": "^22.2.0",
    "@typescript-eslint/eslint-plugin": "^7.15.0",
    "@typescript-eslint/parser": "^7.15.0",
    "bootstrap": "^5.3.3",
    "eslint": "^8.57.0",
    "eslint-plugin-decorator-position": "^5.0.2",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsdoc": "^48.5.2",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "jasmine-core": "^5.5.0",
    "karma": "^6.4.4",
    "karma-chrome-launcher": "^3.2.0",
    "karma-coverage": "^2.2.1",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "karma-junit-reporter": "^2.0.1",
    **"ngx-build-plus": "^19.0.0",**
    "puppeteer": "24.9.0",
    "run-script-os": "1.1.6",
    "typescript": "~5.5.4"
  }
}

angular.json
{
	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
	"version": 1,
	"newProjectRoot": "projects",
	"projects": {
		"orders": {
			"projectType": "application",
			"schematics": {
				"@schematics/angular:application": {
					"strict": true,
					"style": "scss"
				}
			},
			"root": "",
			"sourceRoot": "src",
			"prefix": "o",
			"architect": {
				"build": {
					**"builder": "ngx-build-plus:browser",**
					"options": {
						"outputPath": "dist/orders",
						"index": "src/index.html",
						"main": "src/main.ts",
						"polyfills": [
							"@angular/localize/init",
							"zone.js"
						],
						"tsConfig": "tsconfig.app.json",
						"inlineStyleLanguage": "scss",
						"assets": [
							{
								"glob": "**/*",
								"input": "./node_modules/@ort-agency/shell/src/assets",
								"output": "assets"
							},
							"src/assets"
						],
						"styles": [
							"./node_modules/@ort-agency/ui/src/scss/styles.scss",
							"src/scss/styles.scss"
						],
						"scripts": [],
						"allowedCommonJsDependencies": [
							"@angular-architects/module-federation",
							"@okta/okta-auth-js",
							"@okta/okta-signin-widget",
							"p-cancelable",
							"cross-fetch",
							"tiny-emitter",
							"clipboard",
							"jquery",
							"@sindresorhus/to-milliseconds",
							"parse-ms",
							"q"
						],
						"baseHref": "/",
						"deployUrl": "/",
						"extraWebpackConfig": "webpack.config.js",
						"commonChunk": false,
						"sourceMap": true,
						"vendorChunk": true,
						"optimization": false
					},
					"configurations": {
						"production": {
							"fileReplacements": [
								{
									"replace": "src/environments/environment.ts",
									"with": "src/environments/environment.prod.ts"
								}
							],
							"optimization": true,
							"outputHashing": "all",
							"sourceMap": false,
							"extractLicenses": true,
							"namedChunks": false,
							"buildOptimizer": true,
							"extraWebpackConfig": "webpack.prod.config.js"
						},
						"development": {
							"sourceMap": true,
							"optimization": false,
							"outputHashing": "none",
							"extractLicenses": false,
							"namedChunks": true,
							"vendorChunk": true,
							"buildOptimizer": false
						}
					},
					"defaultConfiguration": "development"
				},
				"serve": {
					**"builder": "ngx-build-plus:dev-server",**
					"options": {
						"buildTarget": "orders:build:development",
						"proxyConfig": "proxy.conf.js",
						"ssl": true,
						"sslCert": ".\\ASP.NET\\https\\orders.pem",
						"sslKey": ".\\ASP.NET\\https\\orders.key",
						"port": 44393,
						"publicHost": "https://localhost:44393",
						"extraWebpackConfig": "webpack.config.js"
					},
					"configurations": {
						"production": {
							"buildTarget": "orders:build:production",
							"extraWebpackConfig": "webpack.prod.config.js"
						},
						"development": {
							"buildTarget": "orders:build:development"
						}
					},
					"defaultConfiguration": "development"
				},
				"lint": {
					"builder": "@angular-eslint/builder:lint",
					"options": {
						"lintFilePatterns": [
							"src/**/*.ts",
							"src/**/*.html"
						]
					}
				},
				"test": {
					"builder": "@angular-devkit/build-angular:karma",
					"options": {
						"tsConfig": "tsconfig.spec.json",
						"karmaConfig": "karma.conf.js",
						"polyfills": [
							"@angular/localize/init",
							"zone.js",
							"zone.js/testing"
						],
						"codeCoverage": true
					}
				}
			}
		}
	},
	"cli": {
		"analytics": false
	}
}

webpack.config.js

const { withModuleFederationPlugin, shareAll } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
  name: 'orders',
  **filename: 'remoteEntry.js',

  exposes: {
    './orders': './src/app/orders/orders.routes.ts',
    './demo': './src/app/demo/demo.routes.ts',
  },**

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  }
});

When I run the application, I get the below error:
It emits remoteEntry.js file, but I get this error. since I get this error I can't load it in Host application.

Uncaught SyntaxError: Cannot use 'import.meta' outside a module

I inspected the HTML in the browser and I found below tags:

<script src="/polyfills.js" type="module"></script>
<script src="/styles.js" defer=""></script>
<script src="/vendor.js" type="module"></script>
<script src="/main.js" type="module"></script>

Also, I tried using custom-webpack package and builder
Below are files:

{
  "name": "orders",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "prestart": "node aspnetcore-https",
    "start": "run-script-os",
    "start:windows": "ng serve",
    "start:default": "ng serve",
    "build": "ng build",
    "build:prod": "ng build -c production",
    "watch": "ng build --watch -c development",
    "lint": "ng lint",
    "test": "ng test --no-watch",
    "test:headless": "ng test --no-watch --browsers=ChromeHeadless"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^19.2.14",
    "@angular/common": "^19.2.14",
    "@angular/compiler": "^19.2.14",
    "@angular/core": "^19.2.14",
    "@angular/forms": "^19.2.14",
    "@angular/localize": "^19.2.14",
    "@angular/platform-browser": "^19.2.14",
    "@angular/platform-browser-dynamic": "^19.2.14",
    "@angular/router": "^19.2.14",
    "@fortawesome/angular-fontawesome": "^1.0.0",
    "@fortawesome/free-solid-svg-icons": "^6.5.2",
    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
    "@okta/okta-angular": "^6.4.0",
    "@ort-agency/core": "^1.0.2",
    "@ort-agency/shell": "^1.0.9",
    "@ort-agency/ui": "^1.0.9",
    "@progress/kendo-angular-dateinputs": "^18.0.0",
    "@progress/kendo-angular-grid": "^18.0.0",
    "@progress/kendo-angular-inputs": "^18.0.0",
    "@progress/kendo-angular-tooltip": "^18.0.0",
    "@progress/kendo-licensing": "^1.5.0",
    "@progress/kendo-theme-bootstrap": "8.0.1",
    "es-module-shims": "^1.5.12",
    "rxjs": "~7.8.0",
    "tslib": "^2.6.3",
    "zone.js": "~0.15.1"
  },
  "devDependencies": {
    "@angular-architects/module-federation": "^19.0.3",
    **"@angular-builders/custom-webpack": "^19.0.1",**
    "@angular-devkit/build-angular": "^19.2.14",
    "@angular-eslint/builder": "^19.0.0",
    "@angular-eslint/eslint-plugin": "^19.0.0",
    "@angular-eslint/eslint-plugin-template": "^19.0.0",
    "@angular-eslint/schematics": "^19.0.0",
    "@angular-eslint/template-parser": "^19.0.0",
    "@angular/cli": "~19.2.14",
    "@angular/compiler-cli": "^19.2.14",
    "@progress/kendo-licensing": "^1.5.0",
    "@types/jasmine": "^5.1.5",
    "@types/node": "^22.2.0",
    "@typescript-eslint/eslint-plugin": "^7.15.0",
    "@typescript-eslint/parser": "^7.15.0",
    "bootstrap": "^5.3.3",
    "eslint": "^8.57.0",
    "eslint-plugin-decorator-position": "^5.0.2",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsdoc": "^48.5.2",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "jasmine-core": "^5.5.0",
    "karma": "^6.4.4",
    "karma-chrome-launcher": "^3.2.0",
    "karma-coverage": "^2.2.1",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "karma-junit-reporter": "^2.0.1",
    "puppeteer": "24.9.0",
    "run-script-os": "1.1.6",
    "typescript": "~5.5.4"
  }
}

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "orders": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true,
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "o",
      "architect": {
        "build": {
          **"builder": "@angular-builders/custom-webpack:browser",**
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            "outputPath": "dist/orders",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "@angular/localize/init",
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "./node_modules/@ort-agency/shell/src/assets",
                "output": "assets"
              },
              "src/assets"
            ],
            "styles": [
              "./node_modules/@ort-agency/ui/src/scss/styles.scss",
              "src/scss/styles.scss"
            ],
            "scripts": [],
            "allowedCommonJsDependencies": [
              "@angular-architects/module-federation",
              "@okta/okta-auth-js",
              "@okta/okta-signin-widget",
              "p-cancelable",
              "cross-fetch",
              "tiny-emitter",
              "clipboard",
              "jquery",
              "@sindresorhus/to-milliseconds",
              "parse-ms",
              "q"
            ],
            "baseHref": "/",
            "deployUrl": "/"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractLicenses": true,
              "namedChunks": false,
              "buildOptimizer": true
            },
            "development": {
              "optimization": false,
              "outputHashing": "none",
              "sourceMap": true,
              "extractLicenses": false,
              "namedChunks": true,
              "vendorChunk": true,
              "buildOptimizer": false
            }
          },
          "defaultConfiguration": "development"
        },
        "serve": {
          **"builder": "@angular-devkit/build-angular:dev-server",**
          "options": {
            "buildTarget": "orders:build:development",
            "proxyConfig": "proxy.conf.js",
            "ssl": true,
            "sslCert": ".\\ASP.NET\\https\\orders.pem",
            "sslKey": ".\\ASP.NET\\https\\orders.key",
            "port": 44393
          },
          "configurations": {
            "production": {
              "buildTarget": "orders:build:production"
            },
            "development": {
              "buildTarget": "orders:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "polyfills": [
              "@angular/localize/init",
              "zone.js",
              "zone.js/testing"
            ],
            "codeCoverage": true
          }
        }
      }
    }
  },
  "cli": {
    "analytics": false
  }
}

Since I'm using angular cli builder here for serve, it can't emit remoteEntry.js file
"serve": {
"builder": "@angular-devkit/build-angular:dev-server"
}

Could you please help me with correct packages, which can help me emit remoteEntry.js for MFE and so that I can lazy load in Host.

I would need right the current packages for module federation:
1)package.json (packages for module federation)
2)angular.json(the builder for build and serve to remit emit remoteEntry.js) for both local running and production build
3)webpack.config.js (which would help me expose remote modules).

To give some context, I have couple MFEs and a Host where I'm loading these MFEs remotely.

I'm using below code to dynamically add the routes with lazy loading with remotes:

const routes = new Array<Route>();

for (const resource of config.resources) {
				routes.push({
					path: resource.path.toLowerCase(),
					loadChildren: () =>
						loadRemoteModule({
							remoteName: resource.remoteName,
							exposedModule: resource.exposedModule,
							remoteEntry: `${resource.baseUrl}remoteEntry.js`,
						}).then(m => m[resource.moduleName]),
					providers: [{ provide: "BASE_URL", useValue: resource.baseUrl }]
				});
}

I have below sample resources:

"Resources": [
	{
		"BaseUrl": "https://localhost:44393/",
		"ExposedModule": "./orders",
		"ModuleName": "routes",
		"Path": "orders",
		"RemoteName": "orders"
	},
	{
		"BaseUrl": "https://localhost:44393/",
		"ExposedModule": "./demo",
		"ModuleName": "routes",
		"Path": "demo",
		"RemoteName": "orders"
	}
]

I get below error when I tried to load MFE in Host