Angular 18安装Native Federation后启动报错：无法找到@angular/build模块
2026-6-19
Angular 18 + Native Federation 启动报错：Cannot find module '@angular/build'
问题场景
项目从Angular 13升级到Angular 18并确认正常运行后，执行以下命令安装Native Federation：
npm install @angular-architects/native-federation ng add @angular-architects/native-federation --project=ptfe-angular-18-app --port=5511
运行npm start启动项目时触发异常：
Cannot find module '@angular/build'
调用栈信息：
C:\Travtronics\PropertyTech\ptfeapp-18.1.0\node_modules@angular-architects\native-federation\src\builders\build\builder.jsC:\Travtronics\PropertyTech\ptfeapp-18.1.0\node_modules@angular-devkit\architect\node\node-modules-architect-host.js
详细日志见：
C:\Users\sangu\AppData\Local\Temp\ng-M9HCtv\angular-errors.log
项目配置文件
angular.json
{ "$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" } }
解决方案
原因
Angular 18已移除@angular/build包，相关构建功能整合到@angular-devkit/build-angular中，但当前Native Federation版本仍在尝试调用旧包API。
修复步骤
- 更新Native Federation到最新兼容版本
npm install @angular-architects/native-federation@latest --save-dev - 验证构建配置指向
确认angular.json中build和serve目标的target配置正确指向@angular-devkit/build-angular的构建器（当前配置已符合要求，无需修改）。 - 清理依赖缓存并重装
rm -rf node_modules package-lock.json npm install - 重新启动项目
npm start
额外检查
排查是否有其他依赖间接引入@angular/build：
npm ls @angular/build
若存在，更新对应依赖至兼容Angular 18的版本。
内容的提问来源于stack exchange，提问作者mallikharjuna
相关产品推荐
相关产品推荐
