angular - 将 Angular 从版本 5 更新到 6

Question

由于出现以下错误，将 angular5 更新为 6 后我有点困惑。

我已将 rxjs 版本从 5.5 更新到 6.1.0，并将 typescript 版本更新到 2.7.2。

我已经关注了 https://update.angular.io 5.2到6.0版本更新及rxjs版本更新指南https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md

这里是发生的错误:

yarn run v1.5.1
$ ng serve --open --proxy-config proxy.conf.js 
Could not find module "@angular-devkit/build-angular" from "/home/aravinda/Desktop/example/ui".
Error: Could not find module "@angular-devkit/build-angular" from "/home/aravinda/Desktop/example/ui".
    at Object.resolve (/home/aravinda/Desktop/example/ui/node_modules/@angular-devkit/core/node/resolve.js:141:11)
    at Observable.rxjs_1.Observable [as _subscribe] (/home/aravinda/Desktop/example/ui/node_modules/@angular-devkit/architect/src/architect.js:132:40)
    at Observable.subscribe (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/Observable.js:162:69)
    at DoOperator.call (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/operators/tap.js:71:23)
    at Observable.subscribe (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/Observable.js:159:22)
    at /home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/util/subscribeTo.js:22:31
    at Object.subscribeToResult (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/util/subscribeToResult.js:7:45)
    at MergeMapSubscriber._innerSub (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/operators/mergeMap.js:132:38)
    at MergeMapSubscriber._tryNext (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/operators/mergeMap.js:129:14)
    at MergeMapSubscriber._next (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/operators/mergeMap.js:112:18)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c ng serve --open --proxy-config proxy.conf.js 

Answer 1

请按照下面提到的升级步骤

1. 确保你的nodeJS版本是8.9+
2. 将 rxjs 升级到 6.0.0-beta.0，请参阅 RxJS 升级指南了解更多信息。 RxJS v6 有重大变化，因此首先要使您的代码与最新的 RxJS 版本兼容。

3. 删除节点模块然后 npm install 进一步全局更新 npm cli

    npm uninstall -g @angular/cli
    npm cache verify
   

   如果你的 npm 版本小于 5 你应该这样做

    npm cache clean
    npm install --save-dev @angular/cli@next
    npm install 
   

4. 将 Angular 框架包更新到 v6

    ng update @angular/core
   

5. 更新 Angular Material

    ng update @angular/material
   

6. 使 typescript 独立，这样它就不需要任何依赖

    npm install -g rxjs-tslint
    rxjs-5-to-6-migrate -p src/tsconfig.app.json
   

7. 将 package.json 中的 Angular 包版本更改为 ^6.0.0-rc.5

    "dependencies": {
    "@angular/animations": "^6.0.0-rc.5",
    "@angular/cdk": "^6.0.0-rc.12",
    "@angular/common": "^6.0.0-rc.5",
    "@angular/core": "^6.0.0-rc.5",
    "@angular/forms": "^6.0.0-rc.5",
    "@angular/http": "^6.0.0-rc.5",
    "@angular/material": "^6.0.0-rc.12",
    "@angular/platform-browser": "^6.0.0-rc.5",
    "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
    "@angular/router": "^6.0.0-rc.5",
    "core-js": "^2.5.5",
    "karma-jasmine": "^1.1.1",
    "rxjs": "^6.0.0-uncanny-rc.7",
    "rxjs-compat": "^6.0.0-uncanny-rc.7",
    "zone.js": "^0.8.26"
    },
   "devDependencies": {
   "@angular-devkit/build-angular": "~0.5.0",
   "@angular/cli": "^6.0.0-rc.5",
   "@angular/compiler-cli": "^6.0.0-rc.5",
   "@types/jasmine": "2.5.38",
   "@types/node": "~8.9.4",
   "codelyzer": "~4.1.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",
    "postcss-loader": "^2.1.4",
    "protractor": "~5.1.0",
    "ts-node": "~5.0.0",
    "tslint": "~5.9.1",
    "typescript": "^2.7.2"
    }
   

8. 更新angular cli配置格式

   ng update @angular/cli --migrate-only --from=1.7.4
   

9. 如果你在 typescript 上遇到错误

   npm install typescript@2.7.2
   

10. 运行 ng serve 来尝试一下。