更新到 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 version)。这是我的 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
作为开发依赖项。这个包是 Angular 6.0 中新引入的
npm install --save-dev @angular-devkit/build-angular
或者,
yarn add @angular-devkit/build-angular --dev
npm update
它就像一个魅力。
node modules
文件夹没有什么“半生不熟”的。这只是根据你的 package.json 重建你的节点模块。当您检查新解决方案时,这是完全正常的事情。
ng update --all
以尝试同时更新所有内容。
对于角度 6 及以上
对我来说可行的解决方案是
npm install
ng update
最后
npm update
如果以下命令不起作用,
npm install --save-dev @angular-devkit/build-angular
然后移动到项目文件夹并运行以下命令:
npm install --save @angular-devkit/build-angular
我通过以下方式修复了我的:
删除 node_modules 文件夹。运行 npm 安装
希望这有帮助!
请遵循这 5 个步骤,它肯定有效。 (我的个人经验)
第 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
。我希望您的问题一定会得到解决。
以上所有答案都是正确的,但它们对我不起作用。我能够完成这项工作的唯一方法是按照步骤/命令:
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 new MY_PROJECT_NAME --create-application=false
作为倒数第二个命令。我在尝试构建库时遇到此错误。 --create-application=false
标志避免引入不必要的依赖项。 (angular.io/guide/creating-libraries#getting-started)
对于角 8
安装 npm-check-updates 包
跑:
$ 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
来源Link
npm install
只需键入 npm install
并运行。然后项目将运行而不会出现错误。或者您可以使用 npm install --save-dev @angular-devkit/build-angular
试试这个。
npm install
npm update
if it's shows something like this.
运行 npm audit fix 来修复它们,或运行 npm audit 以获取详细信息
去做!
以下对我有用。不幸的是,没有其他任何事情发生。
npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular
ng update --all --allow-dirty --force
以下命令有效:
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
npm install --save-dev @angular-devkit/build-angular@latest
为我解决了。
首先删除 node_modules
文件夹
然后重启系统
运行 npm install --save-dev @angular-devkit/build-angular
和
运行 npm install
当我们运行 ng serve
之类的命令时,它使用本地版本的 @angular/cli。所以首先在本地安装最新版本的@angular/cli(不带 -g 标志)。然后使用 ng update @angular/cli
命令更新 cli。我认为这应该可以解决问题。谢谢
如果您要更新 Angular 项目,此链接可能会对您有所帮助https://update.angular.io/
当 Angular 项目未完全配置时,通常会发生此错误。
这将起作用
npm install --save-dev @angular-devkit/build-angular
npm install
只需执行以下命令,错误就解决了
ng 更新 @angular/cli @angular/core
npm卸载@angular-devkit/build-angular
npm install --save-dev @angular-devkit/build-angular 如果上述命令无法解决此错误,则更新节点版本 npm update npm -g
npm 更新 npm -g
为我工作的解决方案
Delete node_modules folder.
run npm install
希望这会奏效!
就在一分钟前,我遇到了同样的问题。我的项目是使用 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
希望我的帮助有效ツ
先试试这个
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 目录中的版本不同,这会导致问题。
npm i --save-dev @angular-devkit/build-angular
此代码将 @angular-devkit/build-angular
安装为开发依赖项。
100% 测试。
只需更新角度版本并添加以下依赖项:
ng update
npm update
npm i @angular-devkit/build-angular
https://www.npmjs.com/package/@angular-devkit/build-angular
我有一个在旧版本的 Angular 中创建的库。
现在我升级到最新版本 11,构建将失败。
事实上,建造者已经改变了。
在执行 ng build
时,我收到了一些类似的错误消息:
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",
转到您创建角度项目的文件夹并删除 node_modules 文件夹。现在打开命令提示符并输入您要使用 cd 运行的项目。输入命令
npm i
或
npm install
现在命令提示符将开始在项目中安装新的 node_modules 文件。安装 node_modules 后,使用命令运行项目
ng s --o
如果上述方法不起作用,则它们是 npm 中的版本不匹配,然后尝试安装 node_modules。
npm update
一般来说,如果不工作,这个方法应该可以工作,然后尝试运行这个命令:
npm install --save-dev @angular-devkit/build-angular
详细信息和替代解决方案 https://learnprogramo.com/could-not-find-module-angular-devkit-build-angular-resolved/
删除节点模块。
使用 npm cache clean --verify 清除缓存。
然后再次 npm install 。
对我来说就像一个魅力。
我遇到了同样的问题。
令人惊讶的是,这只是因为 package.json
中指定的 version
不是预期的格式。
我从版本 "version": "0.1"
切换到 "version": "0.0.1"
并解决了问题。
Angular NEEDS 语义 versioning(也读作 Semver)包含三个部分。
自2天以来,我一直面临同样的问题。
ng -v :6.0.8
node -v :8.11.2
npm -v :6.1.0
确保您位于安装 angular.json
的文件夹中。进入并输入 ng serve
。如果问题仍然存在,那么您仅在 node_modules
中安装了依赖项。键入以下内容,它将起作用:
npm i --only=dev
不定期副业成功案例分享