Angular爬坑记 —— @angular/cli@1.0.1依赖包版本锁定

2,012 阅读4分钟

最近接手一个Angular项目的维护,包依赖如下:

// package.json
  ···
  "dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.1.0",
    "@angular/compiler": "4.1.0",
    "@angular/core": "4.1.0",
    "@angular/forms": "4.1.0",
    "@angular/http": "4.1.0",
    "@angular/platform-browser": "4.1.0",
    "@angular/platform-browser-dynamic": "4.1.0",
    "@angular/platform-server": "4.1.0",
    "@angular/router": "4.1.0",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.25",
    "@ngx-translate/core": "6.0.1",
    "@ngx-translate/http-loader": "0.0.3",
    "@ntesmail/shark-angular2": "^1.2.2",
    "aircraftcarrier-ngx-charts": "^6.0.5",
    "aircraftcarrier-oauth-access-token": "^1.1.6",
    "amcharts3": "^3.21.0",
    "ammap3": "^3.21.14",
    "angular2-cookie": "^1.2.6",
    "angular2-datatable": "0.6.0",
    "animate.css": "3.5.2",
    "body-parser": "~1.13.2",
    "bootstrap": "4.0.0-alpha.6",
    "chart.js": "1.1.1",
    "chartist": "0.10.1",
    "chroma-js": "1.3.3",
    "ckeditor": "4.6.2",
    "cookie-parser": "~1.3.5",
    "core-js": "2.4.1",
    "cross-env": "^3.2.4",
    "d3": "^4.12.2",
    "easy-pie-chart": "2.1.7",
    "egg": "^1.2.0",
    "egg-cookies": "^2.2.1",
    "egg-cors": "^1.1.0",
    "egg-development-proxyagent": "^1.0.0",
    "egg-dubbo": "^1.0.1",
    "egg-mongo-native": "^1.0.6",
    "egg-mongoose": "^2.1.0",
    "egg-multipart": "^1.3.0",
    "egg-oss": "^1.0.2",
    "egg-redis": "^1.0.2",
    "egg-scripts": "^2.11.0",
    "egg-static": "^1.3.0",
    "egg-view-nunjucks": "^2.0.0",
    "excel-export": "^0.5.1",
    "font-awesome": "4.7.0",
    "formstream": "^1.1.0",
    "fullcalendar": "3.3.1",
    "google-maps": "3.2.1",
    "html-pdf": "^2.2.0",
    "intl": "^1.2.5",
    "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",
    "md5": "^2.2.1",
    "moment": "^2.18.1",
    "morgan": "~1.6.1",
    "ng2-ckeditor": "1.1.6",
    "ng2-completer": "1.3.1",
    "ng2-handsontable": "0.48.0",
    "ng2-interceptors": "^1.3.0-1",
    "ng2-slim-loading-bar": "4.0.0",
    "ng2-smart-table": "1.0.3",
    "ng2-tree": "2.0.0-alpha.5",
    "ngx-uploader": "2.2.5",
    "node-xlsx": "^0.10.0",
    "normalize.css": "6.0.0",
    "roboto-fontface": "0.7.0",
    "rxjs": "5.1.1",
    "serve-favicon": "~2.3.0",
    "stream-wormhole": "^1.0.3",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@angular/cli": "1.0.1",
    "@angular/compiler-cli": "4.1.0",
    "@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",
    "amcharts3": "^3.21.0",
    "autod": "^2.7.1",
    "browser-sync": "latest",
    "cheerio": "^0.22.0",
    "codelyzer": "2.0.0",
    "consolidate": "^0.14.5",
    "cross-env": "^3.2.4",
    "egg-bin": "^3.2.0",
    "egg-mock": "^3.2.0",
    "eslint": "^3.13.1",
    "eslint-config-egg": "^3.2.0",
    "express": "^4.15.2",
    "gh-pages": "0.12.0",
    "glob": "^7.0.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",
    "lodash": "^4.17.4",
    "ncp": "^2.0.0",
    "ng2-completer": "^1.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "5.1.0",
    "reload": "^1.1.1",
    "rimraf": "2.6.1",
    "standard-changelog": "1.0.1",
    "stylelint": "7.10.1",
    "supertest": "^2.0.1",
    "supervisor": "^0.12.0",
    "ts-node": "2.0.0",
    "tslint": "4.5.0",
    "tslint-eslint-rules": "3.5.1",
    "tslint-language-service": "0.9.2",
    "typescript": "2.2.2",
    "typogr": "0.6.6",
    "underscore": "1.8.3",
    "webstorm-disable-index": "^1.2.0",
    "wintersmith": "2.2.5",
    "wintersmith-sassy": "1.2.0"
  },
  "scripts": {
    "ng": "ng",
    "rimraf": "rimraf",
    "changelog": "standard-changelog",
    "start": "cross-env EGG_SERVER_ENV=prod NODE_ENV=prod node dispatch.js",
    "dev": "cross-env EGG_SERVER_ENV=test NODE_ENV=prod node dispatch.js",
    "client": "ng serve --proxy-conf build/proxy.conf.json --host localhost --port 8088",
    "serve": "cd app && eslint . && cd .. && cross-env NODE_ENV=local http_proxy=http://127.0.0.1:8888 egg-bin dev",
    "start:hmr": "ng serve --hmr",
    "start:aot": "ng serve --aot",
    "start:prod": "ng serve --prod",
    "start:prod:aot": "ng serve --prod --aot",
    "build": "npm run clean:dist && ng build --output-path app/goodsCarriers",
    "build:prod": "npm run build -- --prod",
    "build:prod:aot": "npm run build:prod -- --aot",
    "build:ci": "npm run build:prod && npm run build:prod:aot",
    "test": "ng test -sr",
    "test:coverage": "npm run clean:coverage && ng test -sr -cc",
    "lint": "ng lint",
    "lint:styles": "stylelint ./src/app/**/*.scss",
    "lint:ci": "npm run lint && npm run lint:styles",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "clean:dist": "npm run rimraf -- app/goodsCarriers",
    "clean:coverage": "npm run rimraf -- coverage",
    "docs:deploy": "wintersmith build -C docs && gh-pages -d docs/build",
    "docs:serve": "wintersmith preview -C docs"
  }
  ···

package.json文件中的依赖包版本锁定与否的依据是啥,版本号^~的区别是啥?

^ 大版本;~小版本。保留这些符号即不锁定依赖包的版本号,否则锁定。全部去掉最保险,但内部包不要去掉。

启动项目

  1. 第一步:按照项目README.md文件说明运行npm install安装项目依赖。
  2. 第二步:依赖包安装完成后,运行npm run client命令启动客户端服务。报错如图:
    客户端启动报错

通常,检测项目环境如何都会运行相关命令查看版本号,如果有正常输出,说明环境存在;否则环境待安装。如:

查看node、npm、nrm版本有对应版本号输出,环境正常

同理,“'ng'不是内部或外部命令,也不是可运行的程序或批处理文件。”初步猜测是Angular环境未安装。运行ng v,如图:

查看ng版本,未输出对应版本号

如此,那运行npm install -g @angular/cli安装下Angular CLI吧~如图:

运行npm install -g @angular/cli安装Angular CLI

再次运行npm run client命令尝试启动客户端服务。报错如图:

客户端服务启动再次失败

回头看package.json文件中依赖包的版本设置,初步猜测是版本号不匹配报错。那咱严格按照package.json文件中指定的依赖版本来安装吧!

Angular指定版本安装

  1. 卸载之前的版本

    npm uninstall -g @angualr/cli

  2. 清理缓存,确保卸载干净

    npm cache verify

  3. 检测是否卸载干净:显示common not found即卸载干净

    ng v

  4. 安装指定Angular版本

    npm install -g @angular/cli@1.0.1

一通折腾后,运行ng v,输出如图:

Angular指定版本安装

可见,好些@angular/包都未成功安装,再次运行npm run client尝试启动项目,仍旧报错,如图:

指定angular/cli安装后项目客户端启动仍旧失败

郁闷!npm install不是安装所有package.json文件中所列的依赖吗?怎么启动项目的时候还是有依赖未安装的提示呢?极有是该项目的版本太旧了...但是当下也没太多精力对其升级,怎么办?

  1. 根据terminal提示信息,缺哪个依赖再临时补哪个依赖 —— 依赖太多,费劲儿!
  2. 有没一种方式完善npm install未成功安装的依赖。分析目前的信息提示,大多是dependencies中的依赖缺失,那单独再统一安装一次呢?

    百度找到:npm安装package.json中的模块依赖

运行npm install --dependencies完成后,再次运行npm run client,终于不再报错了,如图:

客户端启动成功

啊!啊!啊!安全绿~成功人士头顶都需要那么点绿,看来是真的~哈哈哈,未来可期!未来可期...

至此,项目维护第一步 —— 项目启动已解决,继续搬砖ING~

小结

此次问题关键是@angular/cli@1.0.1依赖包版本锁定导致的依赖包安装不完全引起的。确保相关依赖成功安装后,没有启动不起来的项目。fighting~