找不到模块“ @ angular-devkit / build-angular”


Could not find module “@angular-devkit/build-angular”

更新到Angular 6.0.1之后，在ng serve上收到以下错误：

1
2
3
4
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版本)]。(https://github.com/akveo/ngx-admin)这是我的package.json依赖项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
"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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
{
 "$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安装为dev依赖项。此软件包是Angular 6.0中新引入的

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

要么，

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

相关讨论

1
npm update

它像魅力一样运作。

相关讨论

适用于角度6及以上

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

npm install

ng update

最后

npm update

相关讨论

需要明确获取devDependencies。

1
npm i --only=dev
相关讨论

如果以下命令不起作用，

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

然后移至项目文件夹并运行以下命令：

1
npm install --save @angular-devkit/build-angular
相关讨论

以上所有答案都是正确的，但对我没有用。我能够进行这项工作的唯一方法是遵循以下步骤/命令：

1
2
3
4
5
6
npm uninstall -g @angular/[email protected]
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
相关讨论

npm install
只需键入npm install并运行，然后项目将无错误运行。
或者您可以使用npm install --save-dev @angular-devkit/build-angular

以下命令有效：

1
2
npm install
ng update

-您可能会看到消息"我们分析了您的package.json，一切似乎都井然有序。辛苦了！"

1
npm update

然后尝试开发

1
ng build

我收到类型脚本错误，降级为

1
2
3
npm install typescript@">=3.1.1 <3.2

ng build --prod

产品构建成功。

以下是工作组合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
相关讨论

试试这个。

1
2
3
4
5
npm install

npm update

if it's shows something like this.

run npm audit fix to fix them, or npm audit for details

去做！

相关讨论

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

如果您要更新角度项目https://update.angular.io/，此链接可能会为您提供帮助

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

1
2
3
4
5
6
7
8
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

希望我的帮助有效effective

相关讨论

对于Angular 8

安装npm-check-updates软件包

跑：

1
2
3
$ npm i npm-check-updates
$ ncu -u
$ npm install

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

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

ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 3.6.3 was found instead.

然后运行：

1
$ npm install [email protected]

源链接

以下对我有用。不幸的是，没有其他事情。

1
2
3
npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular
ng update --all --allow-dirty --force
相关讨论

只需执行以下命令即可解决错误

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

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

    如果以上命令无法解决此错误，请更新节点版本

    • npm更新npm -g

先尝试一下

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

如果由于缺少包裹而再次出现错误，请尝试

1
npm install

这对我有用，提交然后：

1
2
ng update @angular/cli @angular/core
npm install --save-dev @angular/cli@latest

在将节点从v9升级到v10之后，今天我遇到了同样的问题。
我的环境由docker设置，我不得不从DockerFile中删除以下命令：

1
npm link @angular/cli

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

我在Angular 7中也遇到了同样的问题。只需执行以下命令即可解决错误。

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

为我解决了。

我尝试了上面所有的答案，但是对我没有用。我不得不降级Angular-CLI的版本。我运行命令ng --version和结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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版本的行：

1
2
3
4
5
6
7
...
"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 audit fix --force

就我而言，问题是由于缺少依赖关系。为什么缺少依赖项，因为我忘记了打电话：

npm安装

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

删除package-lock.json并再次执行npm安装。它应该解决此问题。

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

不幸的是，所提供的解决方案都不适合我，但grepit的回答启发了我执行以下步骤。
我通过操作系统(Windows 10)卸载了node.js，然后再次安装了它。然后安装了Angular CLI。然后创建一个新项目，并将我旧项目的src文件复制到这个新文件中，错误消失了。

以下是说明：

  • 通过操作系统卸载node.js并重新安装
  • npm install -g @angular/cli
  • 将您的项目重命名为YOUR_PROJECT_NAME.old
  • ng new YOUR_PROJECT_NAME
  • 运行此hello world项目(ng serve)，以确保您不会收到该错误。
  • xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s
    这是Windows版本的副本，请根据您自己的操作系统进行更改。

    • 当角度项目未完全配置时，通常会发生此错误。

    这会起作用

    1
    2
    3
    npm install --save-dev @angular-devkit/build-angular

    npm install

    首先删除node_modules文件夹

    然后重启系统

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

    和

    运行npm install

    Solution

    在CLI上执行以下命令：

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

    对我来说就像一个魅力。

    尝试这个。对我有用

    1
    2
    3
    npm uninstall -g @angular/cli
    npm cache verify
    npm install -g @angular/cli@next
    相关讨论

    在您的开发依赖项下添加@angular-devkit/build-angular，它将起作用，或者您也可以执行

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

    Simple solution

    击中下面的命令仅可解决此错误

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

    自2天以来，我面临着同样的问题。

    1
    2
    3
    ng -v :6.0.8
    node -v :8.11.2
    npm -v :6.1.0

    确保您位于安装angular.json的文件夹中。进入并输入ng serve。如果问题仍然存在，则说明您在node_modules中仅安装了依赖项。键入以下内容，它将起作用：

    1
    npm i --only=dev

    您npm版本较旧，请尝试运行以下命令：

    1
    npm i npm@latest -g