Open mallikharjuna-wq opened 2 months ago
codewithsuman
commented
1 month ago @mallikharjuna-wq peer dependencies are being installed as internal dependency causing the issue. You may delete the node_modules and package-lock.json and try running install using npm install --legacy-peer-deps, it should fix the issue.
jagadeesh-k-ti
commented
1 month ago same issue here... is this package broken?
Phong6698
commented
1 month ago we have the same issue after trying to upgrade from 17 to 18
YeisonKirax
commented
1 month ago After upgrade, from 17 to 18, the suggestion of @codewithsuman worked.
Phong6698
commented
1 month ago I was able to fix it by changing the version of @angular-devkit/build-angular to 18.1.4.
More about it here: https://github.com/angular-architects/module-federation-plugin/issues/621#issuecomment-2314432171
mallikharjuna-wq
commented
1 month ago @mallikharjuna-wq peer dependencies are being installed as internal dependency causing the issue. You may delete the node_modules and package-lock.json and try running install using
npm install --legacy-peer-deps, it should fix the issue.
the suggestion of @codewithsuman worked
justToPassage
commented
1 month ago For me downgrade @angular-devkit/build-angular to 18.1.4 doesn't work, so i had install @angular/build
npm install @angular/build@18.1.4
Hi @manfredsteyer,
After upgrading from Angular 13 to Angular 18, I installed @angular-architects/native-federation using npm. However, when I run
npm install @angular-architects/native-federation ng add @angular-architects/native-federation --project=ptfe-angular-18-app --port=5511
I encounter the following error:
An unhandled exception occurred: Cannot find module '@angular/build' Require stack:
Any suggestions on how to resolve this?
angular.json file
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "ptfe-angular-18-app": { "root": "", "sourceRoot": "src", "projectType": "application", "architect": { "build": { "builder": "@angular-architects/native-federation:build", "options": {}, "configurations": { "production": { "target": "ptfe-angular-18-app:esbuild:production" }, "development": { "target": "ptfe-angular-18-app:esbuild:development", "dev": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-architects/native-federation:build", "options": { "target": "ptfe-angular-18-app:serve-original:development", "rebuildDelay": 0, "dev": true, "port": 0 } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "buildTarget": "ptfe-angular-18-app:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "karmaConfig": "./karma.conf.js", "polyfills": [ "zone.js", "zone.js/testing" ], "tsConfig": "src/tsconfig.spec.json", "scripts": [ "src/assets/vendor/pace/pace.min.js" ], "styles": [ "node_modules/prismjs/plugins/toolbar/prism-toolbar.css", "src/assets/css/animate.min.css", "node_modules/ngx-toastr/toastr.css", "node_modules/@swimlane/ngx-datatable/index.css", "node_modules/@swimlane/ngx-datatable/assets/icons.css", "src/assets/css/demo.css", "src/assets/sass/core.scss", "src/styles.css" ], "assets": [ "src/assets", "src/favicon.ico" ] } }, "esbuild": { "builder": "@angular-devkit/build-angular:application", "options": { "allowedCommonJsDependencies": [ "@mattlewis92/dom-autoscroller", "angular-calendar/date-adapters/date-fns", "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard", "lodash", "css-element-queries", "sweetalert2", "screenfull" ], "outputPath": { "base": "dist/ptfe-angular-18-app" }, "index": "src/index.html", "tsConfig": "src/tsconfig.app.json", "polyfills": [ "zone.js", "es-module-shims" ], "assets": [ "src/assets", "src/favicon.ico" ], "styles": [ "node_modules/prismjs/plugins/toolbar/prism-toolbar.css", "src/assets/css/animate.min.css", "node_modules/ngx-toastr/toastr.css", "node_modules/@swimlane/ngx-datatable/index.css", "node_modules/@swimlane/ngx-datatable/assets/icons.css", "src/assets/css/demo.css", "src/assets/sass/core.scss", "src/styles.css" ], "scripts": [ "src/assets/vendor/pace/pace.min.js" ], "extractLicenses": false, "sourceMap": true, "optimization": false, "namedChunks": true, "browser": "src/main.ts", "stylePreprocessorOptions": { "includePaths": [ "." ] } }, "configurations": { "production": { "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "6kb" } ], "aot": true, "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "extractLicenses": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] }, "dev": { "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "6kb" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "extractLicenses": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.dev.ts" } ] } } }, "serve-original": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "buildTarget": "ptfe-angular-18-app:build", "port": 5511 }, "configurations": { "production": { "buildTarget": "ptfe-angular-18-app:esbuild:production" } } } } }, "ptfe-angular-18-app-e2e": { "root": "", "sourceRoot": "", "projectType": "application", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "./protractor.conf.js", "devServerTarget": "ptfe-angular-18-app:serve" } } } } }, "schematics": { "@schematics/angular:component": { "prefix": "app", "style": "scss" }, "@schematics/angular:directive": { "prefix": "app" } }, "cli": { "analytics": "9e472cbb-4d61-46ce-9a7c-5eae6a406034" } }
package.json
{ "name": "ptfe-angular-18-app", "version": "18.0.0", "license": "", "scripts": { "ng": "ng", "start": "ng serve --port 5511", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular-magic/ngx-gp-autocomplete": "^2.0.2", "@angular/animations": "18.2.1", "@angular/cdk": "^18.2.1", "@angular/common": "18.2.1", "@angular/compiler": "18.2.1", "@angular/core": "18.2.1", "@angular/forms": "18.2.1", "@angular/localize": "18.2.1", "@angular/platform-browser": "18.2.1", "@angular/platform-browser-dynamic": "18.2.1", "@angular/platform-server": "18.2.1", "@angular/router": "18.2.1", "@googlemaps/js-api-loader": "^1.16.8", "@ng-bootstrap/ng-bootstrap": "^17.0.1", "@ng-select/ng-select": "^13.7.0", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", "@popperjs/core": "^2.11.8", "@swimlane/ngx-datatable": "^20.1.0", "@types/google.maps": "^3.55.12", "acorn": "8.0.4", "bootstrap": "^5.3.2", "clipboard": "^2.0.8", "core-js": "3.8.1", "date-fns": "2.16.1", "es-module-shims": "^1.5.12", "gulp": "4.0.2", "hopscotch": "0.3.1", "intl": "1.2.5", "jwt-decode": "^4.0.0", "moment": "2.29.1", "ngx-cookie-service": "^18.0.0", "ngx-device-detector": "^8.0.0", "ngx-spinner": "^17.0.0", "ngx-toastr": "^19.0.0", "prismjs": "1.22.0", "pug": "3.0.0", "resize-observer-polyfill": "1.5.1", "rxjs": "^7.8.0", "screenfull": "^6.0.2", "simplebar-angular": "^3.2.6", "sweetalert2": "^11.12.4", "tslib": "^2.3.1", "vite": "^5.4.0", "zone.js": "^0.14.10" }, "devDependencies": { "@angular-architects/native-federation": "^18.1.3", "@angular-devkit/build-angular": "18.2.1", "@angular/cli": "18.2.1", "@angular/compiler-cli": "18.2.1", "@angular/language-service": "18.2.1", "@types/core-js": "2.5.3", "@types/jasmine": "~3.6.0", "@types/node": "^22.5.1", "codelyzer": "6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-cli": "~2.0.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "1.5.0", "postcss": "8.2.15", "protractor": "~7.0.0", "rxjs-compat": "6.5.4", "sass": "~1.32.6", "ts-node": "8.6.2", "tslint": "~6.1.0", "typescript": "^5.4.2" } }