"Cannot set property 'customWebpackConfig' of undefined" while adding to the project

[panyann]

Hello, I succeeded to add the module federation to one project, but I have a big problem with the second one, which is more complex.

When I'm using the command: ng add @angular-architects/module-federation --project report --port 3001 I get a response:

Skipping installation: Package already installed
Using Nx builders!
Cannot set property 'customWebpackConfig' of undefined

And nothing is generated... I didn't see such an error yet on the Internet, maybe you will know what is the cause... It's important for our project.

I'm attaching the package.json and angular.json (had to add "txt" extension because github doesn't allow json file) angular.json.txt package.json.txt

But you can also preview them here:

package.json

``` { "name": "agent-tech", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "./node_modules/.bin/nx lint && ng lint", "e2e": "ng e2e", "affected:apps": "./node_modules/.bin/nx affected:apps", "affected:libs": "./node_modules/.bin/nx affected:libs", "affected:build": "./node_modules/.bin/nx affected:build", "affected:e2e": "./node_modules/.bin/nx affected:e2e", "affected:test": "./node_modules/.bin/nx affected:test", "affected:lint": "./node_modules/.bin/nx affected:lint", "affected:dep-graph": "./node_modules/.bin/nx affected:dep-graph", "format": "./node_modules/.bin/nx format:write", "format:write": "./node_modules/.bin/nx format:write", "format:check": "./node_modules/.bin/nx format:check", "update": "ng update @nrwl/schematics", "update:check": "ng update", "workspace-schematic": "./node_modules/.bin/nx workspace-schematic", "dep-graph": "./node_modules/.bin/nx dep-graph", "help": "./node_modules/.bin/nx help", "sourcemap": "rimraf ./dist/ && npm run build:prod -- --common-chunk --source-map --output-hashing=none", "codegen": "node ./tools/scripts/codegen.js", "postcodegen": "npm run format:write -- --uncommitted", "count": "cloc ./apps ./libs", "build:prod": "rimraf ./dist/ && ng build --configuration=prod --base-href=/OnDemandReports/", "build:local": "rimraf ./dist/ && ng build --configuration=local", "increase-node-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng", "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points", "pre-commit": "lint-staged" }, "private": true, "dependencies": { "@agent-tech/agent-tech-ui-theme": "file:libs/agent-tech-ui-theme", "@angular-architects/module-federation": "^13.0.1", "@angular/animations": "12.2.13", "@angular/cdk": "^11.2.11", "@angular/cli": "^12.2.13", "@angular/common": "12.2.13", "@angular/compiler": "12.2.13", "@angular/core": "12.2.13", "@angular/forms": "12.2.13", "@angular/localize": "^12.2.13", "@angular/material": "^11.2.11", "@angular/material-moment-adapter": "^11.2.11", "@angular/platform-browser": "12.2.13", "@angular/platform-browser-dynamic": "12.2.13", "@angular/platform-server": "^12.2.13", "@angular/router": "12.2.13", "@angular/service-worker": "12.2.13", "@fortawesome/angular-fontawesome": "^0.8.2", "@fortawesome/fontawesome-common-types": "^0.2.35", "@fortawesome/fontawesome-svg-core": "^1.2.35", "@fortawesome/free-regular-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@ngrx/effects": "11.1.1", "@ngrx/entity": "^11.1.1", "@ngrx/router-store": "11.1.1", "@ngrx/schematics": "^11.1.1", "@ngrx/store": "11.1.1", "@ngx-translate/core": "^12.1.2", "@ngx-translate/http-loader": "^4.0.0", "@nrwl/schematics": "^8.12.11", "@tinymce/tinymce-angular": "^4.2.2", "@types/dropzone": "^5.7.3", "@types/jstimezonedetect": "^1.0.3", "bootstrap": "^4.5.3", "classlist.js": "^1.1.20150312", "core-js": "2.6.5", "font-awesome": "^4.7.0", "jquery": "^3.5.1", "jstimezonedetect": "^1.0.6", "moment": "^2.29.1", "ngx-device-detector": "^2.0.8", "ngx-trim-directive": "^1.1.0", "popper.js": "^1.14.4", "rxjs": "^6.6.3", "tinymce": "^5.7.1", "ts-loader": "^6.2.2", "tslib": "^2.0.3", "url-search-params-polyfill": "^8.1.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^12.2.13", "@angular/compiler-cli": "12.2.13", "@angular/language-service": "12.2.13", "@ngrx/store-devtools": "^11.1.1", "@nrwl/angular": "^13.1.4", "@nrwl/jest": "^13.1.4", "@nrwl/workspace": "^13.1.4", "@types/jasmine": "^3.6.2", "@types/jasminewd2": "~2.0.3", "@types/jest": "25.1.4", "@types/node": "^13.13.36", "@typescript-eslint/eslint-plugin": "^2.34.0", "@typescript-eslint/parser": "^2.34.0", "cloc": "^2.7.0", "codelyzer": "~5.0.1", "eslint": "^6.8.0", "eslint-config-airbnb-typescript": "^6.3.1", "eslint-config-prettier": "^6.15.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jest": "^23.20.0", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-node": "^11.1.0", "eslint-plugin-prettier": "^3.3.0", "eslint-plugin-react": "^7.21.5", "excel4node": "^1.7.0", "husky": "^4.3.6", "jasmine-core": "^3.7.1", "jasmine-marbles": "0.4.0", "jasmine-spec-reporter": "~4.2.1", "jest": "^26.6.3", "jest-preset-angular": "7.0.0", "karma": "^6.3.8", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^2.0.6", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^1.5.4", "lint-staged": "^10.5.3", "ncp": "^2.0.0", "ngrx-store-freeze": "^0.2.4", "prettier": "2.0.5", "protractor": "^7.0.0", "remove": "^0.1.5", "source-map-explorer": "^2.5.1", "ts-jest": "^26.5.5", "ts-node": "^8.10.2", "typescript": "4.3.5", "webpack-bundle-analyzer": "^3.9.0", "xlsx": "^0.15.6" } } ```

angular.json

``` { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "", "projects": { "report-api": { "root": "libs/report/api", "sourceRoot": "libs/report/api/src", "projectType": "library", "prefix": "agent-tech", "architect": { "build": { "builder": "@nrwl/angular:package", "options": { "tsConfig": "libs/report/api/tsconfig.lib.json", "project": "libs/report/api/ng-package.json" }, "configurations": { "production": { "tsConfig": "libs/report/api/tsconfig.lib.prod.json" } } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { "tsConfig": ["libs/report/api/tsconfig.lib.json", "libs/report/api/tsconfig.spec.json"], "exclude": ["**/node_modules/**"] } }, "test": { "builder": "@nrwl/builders:jest", "options": { "jestConfig": "libs/report/api/jest.config.js", "tsConfig": "libs/report/api/tsconfig.spec.json", "setupFile": "libs/report/api/src/test-setup.ts" } } } }, "layout": { "root": "libs/layout", "sourceRoot": "libs/layout/src", "projectType": "library", "prefix": "agent-tech", "architect": { "build": { "builder": "@nrwl/angular:package", "options": { "tsConfig": "libs/layout/tsconfig.lib.json", "project": "libs/layout/ng-package.json" }, "configurations": { "production": { "tsConfig": "libs/layout/tsconfig.lib.prod.json" } } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { "tsConfig": ["libs/layout/tsconfig.lib.json", "libs/layout/tsconfig.spec.json"], "exclude": ["**/node_modules/**"] } }, "test": { "builder": "@nrwl/builders:jest", "options": { "jestConfig": "libs/layout/jest.config.js", "tsConfig": "libs/layout/tsconfig.spec.json", "setupFile": "libs/layout/src/test-setup.ts" } } } }, "report-idm-api": { "root": "libs/report-idm/api", "sourceRoot": "libs/report-idm/api/src", "projectType": "library", "prefix": "agent-tech", "architect": { "build": { "builder": "@nrwl/angular:package", "options": { "tsConfig": "libs/report-idm/api/tsconfig.lib.json", "project": "libs/report-idm/api/ng-package.json" }, "configurations": { "production": { "tsConfig": "libs/report-idm/api/tsconfig.lib.prod.json" } } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "libs/report-idm/api/src/test.ts", "tsConfig": "libs/report-idm/api/tsconfig.spec.json", "karmaConfig": "libs/report-idm/api/karma.conf.js" } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { "tsConfig": ["libs/report-idm/api/tsconfig.lib.json", "libs/report-idm/api/tsconfig.spec.json"], "exclude": ["**/node_modules/**"] } } } }, "utils": { "root": "libs/utils", "sourceRoot": "libs/utils/src", "projectType": "library", "prefix": "agent-tech", "architect": { "build": { "builder": "@nrwl/angular:package", "options": { "tsConfig": "libs/utils/tsconfig.lib.json", "project": "libs/utils/ng-package.json" }, "configurations": { "production": { "tsConfig": "libs/utils/tsconfig.lib.prod.json" } } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "libs/utils/src/test.ts", "tsConfig": "libs/utils/tsconfig.spec.json", "karmaConfig": "libs/utils/karma.conf.js" } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { "tsConfig": ["libs/utils/tsconfig.lib.json", "libs/utils/tsconfig.spec.json"], "exclude": ["**/node_modules/**"] } } } }, "agent-tech-ui-theme": { "projectType": "library", "root": "libs/agent-tech-ui-theme", "sourceRoot": "libs/agent-tech-ui-theme/src", "prefix": "agent-tech", "architect": { "build": { "builder": "@nrwl/angular:package", "options": { "tsConfig": "libs/agent-tech-ui-theme/tsconfig.lib.json", "project": "libs/agent-tech-ui-theme/ng-package.json" }, "configurations": { "production": { "tsConfig": "libs/agent-tech-ui-theme/tsconfig.lib.prod.json" } } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { "tsConfig": ["libs/agent-tech-ui-theme/tsconfig.lib.json"], "exclude": ["**/node_modules/**", "!libs/agent-tech-ui-theme/**"] } } }, "schematics": { "@nrwl/angular:component": { "styleext": "scss" }, "@schematics/angular": { "styleext": "scss" } } }, "report": { "root": "apps/report/", "sourceRoot": "apps/report/src", "projectType": "application", "prefix": "report", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/apps/report", "index": "apps/report/src/index.html", "main": "apps/report/src/main.ts", "polyfills": "apps/report/src/polyfills.ts", "tsConfig": "apps/report/tsconfig.app.json", "assets": [ { "glob": "favicon.ico", "input": "apps/report/src", "output": "/" }, { "glob": "assets/configs/config.json", "input": "apps/report/src", "output": "/" }, { "glob": "web.config", "input": "apps/report/src", "output": "/" }, "apps/report/src/manifest.json", { "glob": "**/*", "input": "apps/report/src/assets", "output": "/assets" }, { "glob": "**/*", "input": "../../libs/agent-tech-ui-theme/src/fonts", "output": "/fonts" }, { "glob": "*.scss", "input": "../../libs/agent-tech-ui-theme/src/styles", "output": "/styles" } ], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/font-awesome/css/font-awesome.css", "apps/report/src/styles.scss", "apps/report/src/assets/scss/ap-theme.scss" ], "stylePreprocessorOptions": { "includePaths": ["libs/agent-tech-ui-theme/src/"] }, "scripts": [ "node_modules/jquery/dist/jquery.slim.js", "node_modules/bootstrap/dist/js/bootstrap.bundle.js" ], "vendorChunk": true, "extractLicenses": false, "buildOptimizer": false, "sourceMap": true, "optimization": false, "namedChunks": true }, "configurations": { "prod": { "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "6kb" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "buildOptimizer": true, "fileReplacements": [ { "replace": "apps/report/src/environments/environment.ts", "with": "apps/report/src/environments/environment.prod.ts" } ], "serviceWorker": false }, "local": { "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "extractLicenses": true, "buildOptimizer": true, "fileReplacements": [ { "replace": "apps/report/src/environments/environment.ts", "with": "apps/report/src/environments/environment.local.ts" }, { "replace": "apps/report/src/environments/microserviceUrls.ts", "with": "apps/report/src/environments/microserviceUrls.local.ts" } ], "budgets": [ { "type": "bundle", "name": "main", "baseline": "500kb", "maximumWarning": "100kb", "maximumError": "370kb" }, { "type": "initial", "baseline": "900kb", "maximumWarning": "300kb", "maximumError": "610kb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb" } ] }, "es5": { "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "6kb" } ], "tsConfig": "apps/report/tsconfig-es5.app.json" } }, "defaultConfiguration": "" }, "server": { "builder": "@angular-devkit/build-angular:server", "options": { "outputPath": "dist/apps/report-server", "main": "apps/report/src/main.server.ts", "tsConfig": "apps/report/tsconfig.server.json", "stylePreprocessorOptions": { "includePaths": ["libs/agent-tech-ui-theme/src/"] }, "sourceMap": true, "optimization": false }, "defaultConfiguration": "" }, "app-shell": { "builder": "@angular-devkit/build-angular:app-shell", "options": { "browserTarget": "report:build:local", "serverTarget": "report:server", "route": "shell" }, "configurations": { "prod": { "browserTarget": "report:build:prod" }, "local": { "browserTarget": "report:build:local" } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "report:build", "port": 185, "host": "localdev.moneygram.com" }, "configurations": { "production": { "browserTarget": "report:build:production" }, "local": { "browserTarget": "report:build:local" }, "es5": { "browserTarget": "report:build:es5" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "report:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "apps/report/src/test.ts", "polyfills": "apps/report/src/polyfills.ts", "tsConfig": "apps/report/tsconfig.spec.json", "karmaConfig": "apps/report/karma.conf.js", "styles": [ "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/font-awesome/css/font-awesome.css", "apps/report/src/styles.scss", "apps/report/src/assets/scss/ap-theme.scss" ], "stylePreprocessorOptions": { "includePaths": ["libs/agent-tech-ui-theme/src/"] }, "scripts": [], "assets": ["apps/report/src/favicon.ico", "apps/report/src/assets"] } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { "tsConfig": ["apps/report/tsconfig.app.json", "apps/report/tsconfig.spec.json"], "exclude": ["**/node_modules/**"] } } }, "schematics": { "@schematics/angular:component": { "style": "scss" } } } }, "cli": { "analytics": "a19501b8-04bf-4079-9015-253f52430fe8", "warnings": { "typescriptMismatch": false, "versionMismatch": false }, "defaultCollection": "@nrwl/schematics" }, "defaultProject": "report", "schematics": { "@nrwl/angular:application": { "unitTestRunner": "jest", "e2eTestRunner": "cypress" }, "@nrwl/angular:library": { "unitTestRunner": "jest" } } } ```

You can see there, that we use NX and NGRX, maybe they mess something I don't know about...

Thanks for help in advance.

[Edit] When I uninstalled NX and removed nx.json it now shows: Cannot set property 'extraWebpackConfig' of undefined

[zergeborg]

I can confirm that this is an issue, at least with the current version of 14.0.0-rc.1 and the problem is being that the schematic.js makes a lot(!!!) of assumptions with regards to the expected angular/workspace or whatnot json file structure, which contains the Angular meta data.

In my case for example the workspace.json (I am using nx) does not contain any build target, so of course the schematic.js script fails with a similar error.

In my case the fix was to patch the schematic.js script by replacing all projectConfig.architect.build references with projectConfig.architect["build-run"] but this is only a temporary fix which does not scale and it's very unproductive.

[mikezks]

Nx integrates Module Federation with their own builders (and not ngx-build-plus), but still uses this package internally (see docs).

[zergeborg]

@mikezks So I need to question, why was this closed then? If the module-federation-plugin is indeed supposed to work with nx AND other builders, then why is the plugin making assumptions?

If the plugin is only supposed to work with a very specific workspace schema, then how are the plugin users supposed to know that?

As I see it, closing this ticket does not solve anything, it's only matter of time until someone opens a new ticket with the same issue and I would not blame them, since it is the plugin maintainers' responsibility to ensure the library can be used as intended, preventing misusage.