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

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更新说一切都正常。删除node_modules文件夹和新的npm安装也无济于事。

我的项目基于ng2admin(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"
    }
  }
}

安装@angular devkit/build angular as dev dependency。此包是Angular 6.0中新引入的

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

or,

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.8
npm cache clean --force
npm install -g @angular/cli@latest
npm install node-sass -g
ng new MY_PROJECT_NAME
cp -r from_my_old_project to_new_MY_PROJECT_NAME

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

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

确保您位于安装angular.json的文件夹中。进入那个位置,然后打ng发球。如果问题仍然存在,那么node_modules中只安装了依赖项。键入以下内容,即可正常工作:

npm i --only=dev

npm update

它就像一个符咒。


需要显式获取devDependencies。

npm i --only=dev

运行以下命令对我有用npm审计修复--强制


npm安装只需键入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审计修复程序以修复它们,或运行npm审核以获取详细信息

这样做!


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

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


对于角6及以上

对我来说,有效的解决方案是

npm安装

ng更新

最后

npm更新


在我的情况下,问题是,因为缺少依赖项。缺少依赖项,因为我忘记调用:

npm安装

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


以下命令有效:

npm install
ng update

-您可能会看到这样的消息:“我们分析了您的package.json,一切似乎都很正常。干得好!”

npm update

然后尝试开发构建

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.0
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

就在一分钟前,我还遇到过同样的问题。我的项目是使用angular 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。

对我来说很有魅力。


试试这个。这对我有用

npm uninstall -g @angular/cli
npm cache verify
npm 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/core
npm install --save-dev @angular/cli@latest

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

npm link @angular/cli

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


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

以下是说明:

通过操作系统卸载node.js并重新安装npm安装-g@angular/cli将项目重命名为your_project_NAME.oldng新YOUR_PROJECT_NAME运行这个helloworld项目(ng-serve)以确保不会出现错误。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/corenpm卸载@angular devkit/build angularnpm安装--保存dev@angular devkit/build angular如果无法通过上述命令解决此错误,则更新节点版本npm更新npm-g


我尝试了上面的所有答案,但没有一个对我有效。我不得不降级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.1
ng-packagr                         4.7.1
rxjs                               6.3.3
typescript                         3.1.6
webpack                            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.07。然后运行npm uninstall@angular/cli并再次运行npm install-g angular cli@~7.07进行安装


以下内容对我有效。不幸的是,其他内容都无效。

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

对于Angular 8

安装npm检查更新包

Run:

$ 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

源链接


首先删除node_modules文件夹

然后重新启动系统

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

and

运行npm安装


我通过以下方式解决了我的问题:

删除node_modules文件夹。运行npm安装


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


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

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

步骤2:npm缓存清理--强制

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

步骤4:npm i

步骤5:ng生成

之后,发球。


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

npm列表-g--深度=0npm i npm检查更新npm安装

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

ng serve --open

Use:

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

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

它经过了100%的测试。


我也面临同样的问题。

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

我从版本“version”:“0.1”切换到“version”“0.0.1”,这解决了问题。

Angular需要三个部分的语义版本控制(也称为Semver)。


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

ng更新

npm更新

npm i@angular devkit/build angular

https://www.npmjs.com/package/@angular devkit/构建angular


我没有包.json。确保你有包。


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

示例:我有shoppingmenu应用程序,我在该文件夹中运行了npm安装命令。


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

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

事实上,建筑商已经改变了。

在进行ng构建时,我收到了一些类似的错误消息:

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

在angular.json文件中,我必须更改生成器属性:

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

具有:

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

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

我们公司正在使用Nexus Repository Manager作为npm注册表(我们无法访问https://registry.npmjs.org/直接)。这个版本是如此的新,以至于我们的Nexus中还没有包含它。

使存储库和npm安装的缓存无效解决了这个问题。


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

npm install --save-dev

在爱奥尼亚论坛上,这对我有用。

npm i @ionic/angular-toolkit@latest

我的工作解决方案:

删除node_modules文件夹。运行npm安装


转到创建angular项目的文件夹,然后删除node_modules文件夹。现在打开命令提示符并输入要使用cd运行的项目。输入命令

核电站i

or

npm安装

现在,命令提示符将开始在项目中安装新的node_modules文件。然后安装node_modules后,使用命令运行项目ng s--o

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

npm更新

通常,如果此方法不起作用,则应尝试运行以下命令:

npm安装--保存dev@angular devkit/build angular

详细信息和替代解决方案:找不到模块“@angular devkit/build angular”。


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

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

但如果你在一个库项目中,比如我的lib,它位于Angular工作空间中,那么这仍然可能失败:

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

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


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

开发人员通常在没有Node.js Node_modules文件夹的情况下共享Angular应用程序,因为它的大小非常大,共享应用程序或上传需要花费大量时间。

它可以通过单个命令npm install修复。