faild to build angular app after adding module federation
its-dibo opened this issue · comments
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