Angular 6-找不到模块“@angaring-devkit/Build-角”

更新到Angular 6.0.1后,我在ng serve上收到以下错误:

Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".Error: Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".at Object.resolve (/home/Projects/myProjectName/node_modules/@angular-devkit/core/node/resolve.js:141:11)at Observable.rxjs_1.Observable [as _subscribe] (/home/Projects/myProjectName/node_modules/@angular-devkit/architect/src/architect.js:132:40)

ng update表示一切正常。删除node_modules文件夹和重新安装npm install也没有帮助。

我的项目基于ng2-admin(Angular4版本)。这是我的package.json依赖项:

 "dependencies": {"@angular/animations": "^6.0.1","@angular/common": "^6.0.1","@angular/compiler": "^6.0.1","@angular/core": "^6.0.1","@angular/forms": "^6.0.1","@angular/http": "^6.0.1","@angular/platform-browser": "^6.0.1","@angular/platform-browser-dynamic": "^6.0.1","@angular/platform-server": "^6.0.1","@angular/router": "^6.0.1","@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26","@ngx-translate/core": "^10.0.1","@ngx-translate/http-loader": "^3.0.1","amcharts3": "github:amcharts/amcharts3","ammap3": "github:amcharts/ammap3","angular-table": "^1.0.4","angular2-csv": "^0.2.5","angular2-datatable": "0.6.0","animate.css": "3.5.2","bootstrap": "4.0.0-alpha.6","bower": "^1.8.4","chart.js": "1.1.1","chartist": "0.10.1","chroma-js": "1.3.3","ckeditor": "4.6.2","core-js": "2.4.1","easy-pie-chart": "2.1.7","font-awesome": "4.7.0","fullcalendar": "3.3.1","google-maps": "3.2.1","ionicons": "2.0.1","jquery": "3.2.1","jquery-slimscroll": "1.3.8","leaflet": "0.7.7","leaflet-map": "0.2.1","lodash": "4.17.4","ng2-ckeditor": "1.1.6","ng2-completer": "^1.6.3","ng2-handsontable": "^2.1.0-rc.3","ng2-slim-loading-bar": "^4.0.0","ng2-smart-table": "^1.0.3","ng2-tree": "2.0.0-alpha.5","ngx-uploader": "4.2.4","normalize.css": "6.0.0","roboto-fontface": "0.7.0","rxjs": "^6.1.0","rxjs-compat": "^6.1.0","zone.js": "0.8.26"},"devDependencies": {"@angular/cli": "^6.0.1","@angular/compiler-cli": "^6.0.1","@types/fullcalendar": "2.7.40","@types/jasmine": "2.5.38","@types/jquery": "2.0.41","@types/jquery.slimscroll": "1.3.30","@types/lodash": "4.14.61","@types/node": "6.0.69","codelyzer": "3.0.1","gh-pages": "0.12.0","jasmine-core": "2.5.2","jasmine-spec-reporter": "3.2.0","karma": "1.4.1","karma-chrome-launcher": "2.0.0","karma-cli": "1.0.1","karma-coverage-istanbul-reporter": "0.2.0","karma-jasmine": "1.1.0","karma-jasmine-html-reporter": "0.2.2","npm-run-all": "4.0.2","protractor": "5.1.0","rimraf": "2.6.1","standard-changelog": "1.0.1","stylelint": "7.10.1","ts-node": "2.1.2","tslint": "5.2.0","tslint-eslint-rules": "4.0.0","tslint-language-service": "0.9.6","typescript": "^2.7.2","typogr": "0.6.6","underscore": "1.8.3","wintersmith": "2.2.5","wintersmith-sassy": "1.1.0"}

我的angular.json:

{"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {"ng2-admin": {"root": "","sourceRoot": "src","projectType": "application","architect": {"build": {"builder": "@angular-devkit/build-angular:browser","options": {"outputPath": "dist","index": "src/index.html","main": "src/main.ts","tsConfig": "src/tsconfig.app.json","polyfills": "src/polyfills.ts","assets": ["src/assets","src/favicon.ico"],"styles": ["node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss","node_modules/normalize.css/normalize.css","node_modules/font-awesome/scss/font-awesome.scss","node_modules/ionicons/scss/ionicons.scss","node_modules/bootstrap/scss/bootstrap.scss","node_modules/leaflet/dist/leaflet.css","node_modules/chartist/dist/chartist.css","node_modules/fullcalendar/dist/fullcalendar.css","node_modules/handsontable/dist/handsontable.full.css","node_modules/ng2-slim-loading-bar/style.css","src/app/theme/theme.scss","src/styles.scss"],"scripts": ["node_modules/jquery/dist/jquery.js","node_modules/easy-pie-chart/dist/jquery.easypiechart.js","node_modules/jquery-slimscroll/jquery.slimscroll.js","node_modules/tether/dist/js/tether.js","node_modules/bootstrap/dist/js/bootstrap.js","node_modules/handsontable/dist/handsontable.full.js","node_modules/chroma-js/chroma.js"]},"configurations": {"production": {"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"}]}}},"serve": {"builder": "@angular-devkit/build-angular:dev-server","options": {"browserTarget": "ng2-admin:build"},"configurations": {"production": {"browserTarget": "ng2-admin:build:production"}}},"extract-i18n": {"builder": "@angular-devkit/build-angular:extract-i18n","options": {"browserTarget": "ng2-admin:build"}},"test": {"builder": "@angular-devkit/build-angular:karma","options": {"main": "src/test.ts","karmaConfig": "./karma.conf.js","polyfills": "src/polyfills.ts","tsConfig": "src/tsconfig.spec.json","scripts": ["node_modules/jquery/dist/jquery.js","node_modules/easy-pie-chart/dist/jquery.easypiechart.js","node_modules/jquery-slimscroll/jquery.slimscroll.js","node_modules/tether/dist/js/tether.js","node_modules/bootstrap/dist/js/bootstrap.js","node_modules/handsontable/dist/handsontable.full.js","node_modules/chroma-js/chroma.js"],"styles": ["node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss","node_modules/normalize.css/normalize.css","node_modules/font-awesome/scss/font-awesome.scss","node_modules/ionicons/scss/ionicons.scss","node_modules/bootstrap/scss/bootstrap.scss","node_modules/leaflet/dist/leaflet.css","node_modules/chartist/dist/chartist.css","node_modules/fullcalendar/dist/fullcalendar.css","node_modules/handsontable/dist/handsontable.full.css","node_modules/ng2-slim-loading-bar/style.css","src/app/theme/theme.scss","src/styles.scss"],"assets": ["src/assets","src/favicon.ico"]}},"lint": {"builder": "@angular-devkit/build-angular:tslint","options": {"tsConfig": ["src/tsconfig.app.json","src/tsconfig.spec.json"],"exclude": []}}}},"ng2-admin-e2e": {"root": "","sourceRoot": "","projectType": "application","architect": {"e2e": {"builder": "@angular-devkit/build-angular:protractor","options": {"protractorConfig": "./protractor.conf.js","devServerTarget": "ng2-admin:serve"}},"lint": {"builder": "@angular-devkit/build-angular:tslint","options": {"tsConfig": ["e2e/tsconfig.e2e.json"],"exclude": []}}}}},"defaultProject": "ng2-admin","schematics": {"@schematics/angular:component": {"prefix": "app","styleext": "scss"},"@schematics/angular:directive": {"prefix": "app"}}}
1576119 次浏览

安装@angular-devkit/build-angular作为开发依赖项。这个包是Angular 6.0中新引入的

npm install --save-dev @angular-devkit/build-angular

或,

yarn add @angular-devkit/build-angular --dev

如果以下命令不起作用,

npm install --save-dev @angular-devkit/build-angular

然后移动到项目文件夹并运行以下命令:

npm install --save @angular-devkit/build-angular

npm版本旧,请尝试运行以下命令:

npm i npm@latest -g

上述所有答案都是正确的,但它们对我不起作用。我能够完成这项工作的唯一方法是按照步骤/命令操作:

npm uninstall -g @angular/cli@6.0.8npm cache clean --forcenpm install -g @angular/cli@latestnpm install node-sass -gng new MY_PROJECT_NAMEcp -r from_my_old_project to_new_MY_PROJECT_NAME

两天以来我一直面临着同样的问题。

ng -v :6.0.8node -v :8.11.2npm -v :6.1.0

确保您在安装angular.json的文件夹中。进入并键入ng serve。如果问题仍然出现,那么您只在node_modules中安装了依赖项。键入以下内容,它将工作:

npm i --only=dev
npm update

它像一个魅力。

需要显式获取devDepend的。

npm i --only=dev

运行下面的工作对我来说npm audit fix --force

npm install只需键入npm install并运行。然后项目将运行而不会出现错误。或者你可以使用npm install --save-dev @angular-devkit/build-angular

删除package-lock.json并重新进行npm安装。它应该可以解决这个问题。

**当您使用ng new创建Angular 6应用程序并且安装其他依赖项后发现此错误时,此修复更合适。

试试这个。

npm install
npm update
if it's shows something like this.

运行npm audit fix以修复它们,或运行npm audit以获取详细信息

照做!

当我们运行像ng serve这样的命令时,它使用本地版本的@角/cli。所以首先在本地安装最新版本的@角/cli(没有-g标志)。然后使用ng update @angular/cli命令更新cli。我认为这应该可以解决这个问题。谢谢

如果您正在更新角度项目https://update.angular.io/,此链接可能会对您有所帮助

角度6及以上

我的工作解决方案是

npm install

ng update

最后

npm update

在我的例子中,问题是,因为缺少依赖项。依赖项丢失了,因为我忘记调用:

npm install

调用上述命令后,所有必需的依赖项都加载到node_modules中,这不再是问题

以下命令有效:

npm installng update

-您可能会看到消息“我们分析了您的package.json一切似乎都井然有序。干得好!”

npm update

然后尝试dev build

ng build

我得到了脚本类型的错误,降级为

npm install typescript@">=3.1.1 <3.2
ng build --prod

所有成功与产品构建。

下面是工作组合

ng --version
Package                           Version-----------------------------------------------------------@angular-devkit/architect         0.11.0@angular-devkit/build-angular     0.11.0@angular-devkit/build-optimizer   0.11.0@angular-devkit/build-webpack     0.11.0@angular-devkit/core              7.1.0@angular-devkit/schematics        7.1.0@angular/cli                      7.1.0@ngtools/webpack                  7.1.0@schematics/angular               7.1.0@schematics/update                0.11.0rxjs                              6.3.3typescript                        3.1.6webpack                           4.23.1

我一分钟前也遇到了同样的问题。我的项目是使用angle-cli的v 1.6.0生成的。

1. npm update -g @angular/cli
2. editing my package.json changing the line"@angular/cli": "1.6.0",to"@angular/cli": "^1.6.0",
3. npm update

我希望我的帮助是有效的。

解决方案

在CLI上执行以下命令:

  • npm安装
  • 删除node_modules。
  • 使用npm cache clean --verify清除缓存。
  • 然后再次npm install

对我来说就像一个魅力。

试试这个对我有用

npm uninstall -g @angular/clinpm cache verifynpm install -g @angular/cli@next

先试试这个

npm install --save-dev @angular-devkit/build-angular

如果丢失的包再次出现错误,请尝试

npm install

此错误通常发生在角度项目未完全配置时。

这会管用的

npm install --save-dev @angular-devkit/build-angular
npm install

这对我有用,提交然后:

ng update @angular/cli @angular/corenpm install --save-dev @angular/cli@latest

我今天遇到了同样的问题,在将节点从v9升级到v10之后。
我的环境是由docker设置的,我必须从我的DockerFile中删除此命令:

npm link @angular/cli

它创建一个指向安装节点的目录的符号链接。
我猜它的angular/cli模块与我项目的node_modules目录中的版本不同,这导致了这个问题。

不幸的是,没有一个提供的解决方案对我来说是完美的,但是格里皮特的回答启发了我做以下步骤。我通过我的操作系统(Windows 10)卸载node.js并再次安装它。然后安装了Angular CLI。然后创建了一个新项目,并将旧项目的src文件复制到这个新项目中,错误消失了。

以下是说明:

  1. 通过您的操作系统卸载node.js并再次安装
  2. npm install -g @angular/cli
  3. 将项目重命名为YOUR_PROJECT_NAME.old
  4. ng new YOUR_PROJECT_NAME
  5. 运行这个hello world项目(ng serve)以确保您不会收到错误。
  6. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
    这是Windows版本的副本,请根据您自己的操作系统更改它。
npm install --save-dev @angular-devkit/build-angular@latest

帮我解决了。

只需执行以下命令,错误就解决了

  • ng update @angular/cli @angular/core
  • npm uninstall @angular-devkit/build-angular
  • npm install --save-dev @angular-devkit/build-angular

    如果上述命令无法解决此错误,则更新节点版本

    • 更新时间npm更新时间

我尝试了上面的所有答案,但没有一个对我有用。我不得不降级Angular-CLI的版本。我运行命令ng --version并结果:

@angular-devkit/architect          0.10.7@angular-devkit/build-angular      0.10.7@angular-devkit/build-ng-packagr   0.10.7@angular-devkit/build-optimizer    0.10.7@angular-devkit/build-webpack      0.10.7@angular-devkit/core               7.0.7 <-- notice this!@angular-devkit/schematics         8.2.1@angular/cli                       8.2.1 <-- and this!@ngtools/json-schema               1.1.0@ngtools/webpack                   7.0.7@schematics/angular                8.2.1@schematics/update                 0.802.1ng-packagr                         4.7.1rxjs                               6.3.3typescript                         3.1.6webpack                            4.19.1

我打开package.json并搜索定义CLI版本的行:

..."devDependencies": {"@angular-devkit/build-angular": "~0.10.0","@angular-devkit/build-ng-packagr": "~0.10.0","@angular/cli": "~8.2.0" -- I changed here to ~7.0.7...}...

我将@angular/cli的版本更改为~7.0.7。然后运行npm uninstall @angular/cli并再次运行npm install -g angular-cli@~7.0.7安装

以下方法对我有效。不幸的是,没有其他方法。

npm uninstall @angular-devkit/build-angularnpm install @angular-devkit/build-angularng update --all --allow-dirty --force

对于Angular 8

安装npm-check更新项目名称

运行:

$ npm i npm-check-updates$ ncu -u$ npm install

此软件包将更新所有软件包并解决此问题

注意:更新后如果您遇到此问题:

Angular编译器中的错误需要TypeScript>=3.4.0和<3.6.0但是3.6.3被发现了。

然后运行:

$ npm install typescript@3.5.3

Source链接

首先删除node_modules文件夹

然后重启系统

运行npm install --save-dev @angular-devkit/build-angular

运行npm install

我固定我的:

  1. 删除node_modules文件夹。

  2. 运行npm install

我通过在64位操作系统上安装Angular解决了这个问题。我收到错误是因为我最初在32位操作系统上运行它

请遵循这五个步骤。它绝对有效(我的个人经验)

步骤1:npm uninstall -g @angular/cli

步骤2:npm cache clean --force

步骤3:npm install -g @angular/cli@latest

步骤4:npm i

步骤5:ng build

之后,ng serve

在以下命令的帮助下,您的应用程序将按您的预期工作。运行我提到的每个命令。

  1. npm list -g --depth=0
  2. npm i npm-check-updates
  3. npm安装

最后,运行以下命令在浏览器中打开您的项目:

ng serve --open

用途:

npm i --save-dev @angular-devkit/build-angular

此代码将@angular-devkit/build-angular安装为开发依赖项。

100%测试

我也面临同样的问题。

令人惊讶的是,这只是因为package.json中指定的version不是预期的格式。

我从版本"version": "0.1"切换到"version": "0.0.1",它解决了这个问题。

Angular需要语义版本控制(也读Semver)有三个部分。

只需更新Angular版本并添加以下依赖项:

ng update

npm update

npm i @angular-devkit/build-angular

https://www.npmjs.com/package/

我没有package.json.确保你有一个。

对我来说,当我在项目文件夹中运行npm install命令时,它起作用了。

示例:我有shop菜单应用程序,我在该文件夹中运行npm install命令。

我有一个库,我在旧版本的Angular中创建。

现在我升级到最新版本11,构建将失败。

事实上,建造者已经改变了。

当做一个ng build时,我是一个有点类似的错误消息:

Cannot find module '@angular-devkit/build-ng-packagr/package.json'

angular.json文件中,我必须更改Builder属性:

"builder": "@angular-devkit/build-ng-packagr:build",

有:

"builder": "@angular-devkit/build-angular:ng-packagr",

我对@angular-devkit/build-angular的最新版本有问题(在撰写本文时,11.0.5仅在17小时前发布)。

我们公司正在使用Nexus存储库管理器作为npm注册表(我们不直接访问https://registry.npmjs.org/)。该版本非常新,尚未包含在我们的Nexus中。

无效存储库npm install缓存修复了这个问题。

我只是做了下面的,它奏效了。

npm install --save-dev

Ionic论坛,这对我很有效。

npm i @ionic/angular-toolkit@latest

我的工作解决方案:

  1. 删除node_modules文件夹。

  2. 运行npm install

  1. 转到创建角度项目的文件夹,然后删除node_modules文件夹。

  2. 现在打开命令提示符并输入要使用cd运行的项目。

  3. 输入命令

npm i

or

npm install

  1. 现在命令提示符将开始在项目中安装新的node_modules文件。

  2. 当安装node_modules时,使用命令运行项目

    ng s --o

如果上述方法不起作用,那么npm中的版本存在一些不匹配,然后尝试安装node_modules。

npm update

通常,如果不起作用,此方法应该起作用,然后尝试运行此命令:

npm install --save-dev @angular-devkit/build-angular

详细信息和替代解决方案:找不到模块"@angaring-devkit/build d-的"

这些答案基本上都是一样的

npm install -D @angular-devkit/build-angularnpm install

但是,如果您在Angular工作区内的图书馆项目(如my-lib)中,这仍然可能会失败:

workspace|-- projects|    |-- my-lib|        |-- package.json||-- package.json

在这种情况下,确保不仅在目录workspace/projects/my-lib中运行npm install,而且直接在目录workspace中运行npm install

当Angular应用程序中没有Node.js模块时,通常会出现此错误。

开发人员大多在没有Node.jsnode_modules文件夹的情况下共享Angular应用程序,因为它的大小非常大,并且共享应用程序或上传需要很多时间。

它可以用单个命令修复,npm install