Error: computed is not a function when using Angular 18 in Remote and Angular 15 in Host with...

I am working on a micro-frontend architecture using Angular and Webpack Module Federation. I have a host application using Angular 15 and a remote application using Angular 18. Both applications are configured for Module Federation with the following setups:

Remote Application Configuration: Angular Version: 18 webpack.config.js:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, "tsconfig.json"), []);

module.exports = {
output: {
uniqueName: "remoteDashboard",
publicPath: "auto",
},
optimization: {
runtimeChunk: false,
},
experiments: {
outputModule: true,
},
plugins: [
new ModuleFederationPlugin({
library: { type: "module" },
name: "remoteDashboard",
filename: "remoteEntry.js",
exposes: {
"./HomeModule": "./src/app/components/home/home.module.ts",
"./SettingsComponent": "./src/app/components/dashboard/settings/settings.component.ts",
},
shared: {
...sharedMappings.getDescriptors(),
"@angular/core": { singleton: true, strictVersion: false, requiredVersion: "^18.2.0" },
"@angular/common": { singleton: true, strictVersion: false, requiredVersion: "^18.2.0" },
"@angular/router": { singleton: true, strictVersion: false, requiredVersion: "^18.2.0" },
"@angular/material": { singleton: true, strictVersion: false, requiredVersion: "^18.0.0" },
"chart.js": { singleton: true, strictVersion: false, requiredVersion: "^4.4.0" },
"ng2-charts": { singleton: true, strictVersion: false, requiredVersion: "^6.0.0" },
},
}),
sharedMappings.getPlugin(),
],
};


Host Application Configuration: Angular Version: 15 webpack.config.js:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
output: {
uniqueName: "EjarhostApp",
publicPath: "auto",
},
optimization: {
runtimeChunk: false,
},
experiments: {
outputModule: true,
},
resolve: {
fallback: {
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
},
},
plugins: [
new ModuleFederationPlugin({
name: "EjarhostApp",
library: { type: "module" },
shared: {
"@angular/core": {
singleton: true,
strictVersion: false,
requiredVersion: "^15.2.9",
},
"@angular/common": {
singleton: true,
strictVersion: false,
requiredVersion: "^15.2.9",
},
"@angular/router": {
singleton: true,
strictVersion: false,
requiredVersion: "^15.2.9",
},
"@angular/platform-browser": {
singleton: true,
strictVersion: false,
requiredVersion: "^15.2.9",
},
"@angular/material": {
singleton: true,
strictVersion: false,
requiredVersion: "^15.2.9",
},
},
}),
],
};


Issue: When running the host application and accessing the remote module, I encounter the following error in the browser console:

core.mjs:8400 ERROR Error: Uncaught (in promise): TypeError: (0 , angular_core__WEBPACK_IMPORTED_MODULE_0_.computed) is not a function TypeError: (0 , angular_core__WEBPACK_IMPORTED_MODULE_0_.computed) is not a function
​

Analysis: Angular 18 introduced features like computed in @angular/core, which is not available in Angular 15. The host application, running Angular 15, cannot interpret or execute certain features from the remote app that rely on Angular 18 functionality.

Questions: Is it possible to use different Angular versions (15 for host and 18 for remote) in a Module Federation setup? How can I resolve this compatibility issue, ensuring the host application does not break while consuming the remote application? Should I align both Angular versions to avoid such issues, and if so, what are the recommended approaches?

Continue reading...