faild to build angular app after adding module federation

I added module federation to my esbuild-based angular app with nx

nx g @angular-architects/native-federation:init --project mobarmegeen-ui --port 4200 --type dynamic-host

it changed the executor property from @angular-devkit/build-angular:application to @angular-architects/native-federation:build and moved most props of build to a newly created property called esbuild

when I needed to build the app I got errors like Data path "" must NOT have additional properties(server). this indicates that server shouldn't exist in the target build's options (precisely, in esbuild's options)

changing back to the old project.json the app is built successfully

update

this issue disappeared after updated angular to v17.3.4 and @angular-architects/native-federation to 17.1.7 but still this error occurs

require() of ES Module app/federation.config.js from node_modules/@softarc/native-federation/src/lib/core/load-federation-config.js not supported.

project.json (with module federation)

``` { "$schema": "../../../node_modules/nx/schemas/project-schema.json", "name": "mobarmegeen-ui", "projectType": "application", "generators": { "@schematics/angular:component": { "style": "scss" } }, "sourceRoot": "apps/mobarmegeen/mobarmegeen-ui/src", "prefix": "app", "targets": { "build": { "executor": "@angular-architects/native-federation:build", "options": {}, "configurations": { "production": { "target": "mobarmegeen-ui:esbuild:production" }, "development": { "target": "mobarmegeen-ui:esbuild:development", "dev": true } }, "defaultConfiguration": "production" }, "serve": { "executor": "@angular-architects/native-federation:build", "options": { "target": "mobarmegeen-ui:esbuild:development", "rebuildDelay": 0, "dev": true, "port": 4200 } }, "extract-i18n": { "executor": "@angular-devkit/build-angular:extract-i18n", "options": { "buildTarget": "mobarmegeen-ui:build" } }, "test": { "executor": "@angular-devkit/build-angular:karma", "options": { "polyfills": ["zone.js", "zone.js/testing"], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": [ "apps/mobarmegeen/mobarmegeen-ui/src/favicon.ico", "apps/mobarmegeen/mobarmegeen-ui/src/assets", "apps/mobarmegeen/mobarmegeen-ui/src/manifest.webmanifest", "apps/mobarmegeen/mobarmegeen-ui/src/scripts.mjs", "apps/mobarmegeen/mobarmegeen-ui/src/configs" ], "styles": [ "apps/mobarmegeen/mobarmegeen-ui/src/styles.scss", "@angular/material/prebuilt-themes/indigo-pink.css" ], "scripts": [] } }, "esbuild": { "executor": "@angular-devkit/build-angular:browser-esbuild", "outputs": ["{options.outputPath}"], "options": { "outputPath": "apps/mobarmegeen/mobarmegeen-ui/dist", "index": "apps/mobarmegeen/mobarmegeen-ui/src/index.html", "polyfills": ["zone.js", "es-module-shims"], "tsConfig": "apps/mobarmegeen/mobarmegeen-ui/tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "apps/mobarmegeen/mobarmegeen-ui/src/favicon.ico", "apps/mobarmegeen/mobarmegeen-ui/src/assets", "apps/mobarmegeen/mobarmegeen-ui/src/manifest.webmanifest", "apps/mobarmegeen/mobarmegeen-ui/src/scripts.mjs", "apps/mobarmegeen/mobarmegeen-ui/src/configs" ], "styles": [ "@angular/material/prebuilt-themes/indigo-pink.css", "apps/mobarmegeen/mobarmegeen-ui/src/styles.scss", "quill/dist/quill.core.css", "quill/dist/quill.bubble.css", "quill/dist/quill.snow.css" ], "scripts": [], "server": "apps/mobarmegeen/mobarmegeen-ui/src/main.server.ts", "prerender": false, "ssr": { "entry": "apps/mobarmegeen/mobarmegeen-ui/server.ts" }, "serviceWorker": "apps/mobarmegeen/mobarmegeen-ui/ngsw-config.json", "define": {}, "main": "apps/mobarmegeen/mobarmegeen-ui/src/main.ts" }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "2mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb" } ], "outputHashing": "all", "namedChunks": true }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve-original": { "executor": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "mobarmegeen-ui:build:production" }, "development": { "buildTarget": "mobarmegeen-ui:build:development" } }, "defaultConfiguration": "development" } } } ```

project.json (original)

``` { "$schema": "node_modules/nx/schemas/project-schema.json", "name": "mobarmegeen-ui", "projectType": "application", "generators": { "@schematics/angular:component": { "style": "scss" } }, "sourceRoot": "apps/mobarmegeen/mobarmegeen-ui/src", "prefix": "app", "targets": { "build": { "executor": "@angular-devkit/build-angular:application", "outputs": ["{options.outputPath}"], "options": { "outputPath": "{projectRoot}/dist", "index": "{projectRoot}/src/index.html", "browser": "{projectRoot}/src/main.ts", "polyfills": ["zone.js"], "tsConfig": "{projectRoot}/tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "{projectRoot}/src/favicon.ico", "{projectRoot}/src/assets", "{projectRoot}/src/manifest.webmanifest", "{projectRoot}/src/scripts.mjs", "{projectRoot}/src/configs" ], "styles": [ "@angular/material/prebuilt-themes/indigo-pink.css", "{projectRoot}/src/styles.scss", "quill/dist/quill.core.css", "quill/dist/quill.bubble.css", "quill/dist/quill.snow.css" ], "scripts": [], "server": "{projectRoot}/src/main.server.ts", "prerender": false, "ssr": { "entry": "{projectRoot}/server.ts" }, "serviceWorker": "{projectRoot}/ngsw-config.json", "define": {} }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "2mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb" } ], "outputHashing": "all", "namedChunks": true }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve": { "executor": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "mobarmegeen-ui:build:production" }, "development": { "buildTarget": "mobarmegeen-ui:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "executor": "@angular-devkit/build-angular:extract-i18n", "options": { "buildTarget": "mobarmegeen-ui:build" } }, "test": { "executor": "@angular-devkit/build-angular:karma", "options": { "polyfills": ["zone.js", "zone.js/testing"], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": [ "{projectRoot}/src/favicon.ico", "{projectRoot}/src/assets", "{projectRoot}/src/manifest.webmanifest", "{projectRoot}/src/scripts.mjs", "{projectRoot}/src/configs" ], "styles": [ "{projectRoot}/src/styles.scss", "@angular/material/prebuilt-themes/indigo-pink.css" ], "scripts": [] } } } } ```

env

Angular CLI: 17.3.4
Node: 20.10.0
Package Manager: yarn 1.22.22
OS: linux x64

Angular: 17.3.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.10
@angular-devkit/build-angular   17.3.4
@angular-devkit/core            17.3.4
@angular-devkit/schematics      17.3.4
@schematics/angular             17.3.4
rxjs                            7.8.1
typescript                      5.2.2
zone.js

nx (global)    : 18.2.4
nx             : 18.2.4
@nx/js         : 18.2.4
@nx/jest       : 18.2.3
@nx/linter     : 18.2.3
@nx/eslint     : 18.2.3
@nx/workspace  : 18.2.4
@nx/angular    : 18.2.4
@nx/cypress    : 18.2.4
@nx/devkit     : 18.2.4
@nrwl/tao      : 18.2.4
@nx/web        : 18.2.4
@nx/webpack    : 18.2.4
typescript     : 5.4.5
---------------------------------------
Registered Plugins:
@nx/eslint/plugin
@nx/cypress/plugin

angular-architects / module-federation-plugin

faild to build angular app after adding module federation #538

env