Morning Star's blog
  2. 前端开发
  3. Angular框架

今天将一个老项目从Angular7升级到Angular8，本文记录一下遇到的问题及解决方法。

查看当前项目是否需要升级

在项目目录中，运行以下命令:

1
ng update

系统会提示:

1
2
3
4
5
6
7
8
9
10
11
12
13
Using package manager: 'yarn'
Collecting installed dependencies...
Found 32 dependencies.
    We analyzed your package.json, there are some packages to update:
    
      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       7.3.9 -> 8.0.2           ng update @angular/cli
      @angular/core                      7.2.15 -> 8.0.0          ng update @angular/core


    There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

可以看到，@angular/cli 和 @angular/core 都可以升级到8的版本。

升级Angular8

选择一次性全部升级，所以执行以下命令:

1
ng update --all

这时系统会提示typescript的版本不兼容

1
Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.1")

查看配置文件package.json的”devDependencies”段落, 可以看到现在的项目当前的版本时比较低的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "^7.0.2",
    "@angular/compiler-cli": "^7.0.0",
    "@angular/language-service": "^7.0.0",
    "@types/jasmine": "~2.8.9",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~10.12.0",
    "codelyzer": "^4.5.0",
    "jasmine-core": "~3.2.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^1.3.1",
    "protractor": "~5.4.1",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "^3.1.3"
  }

执行强制升级, 执行:

1
ng update --all --force

能完成升级，但会有如下的警告:

1
2
3
warning " > @angular-devkit/build-angular@0.800.2" has incorrect peer dependency "typescript@>=3.1 < 3.5".
warning "@angular-devkit/build-angular > @ngtools/webpack@8.0.2" has incorrect peer dependency "typescript@>=3.4 < 3.5".
warning " > @angular/compiler-cli@8.0.0" has incorrect peer dependency "typescript@>=3.4 <3.5".

再打开package.json文件，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "^8.0.2",
    "@angular/compiler-cli": "^8.0.0",
    "@angular/language-service": "^8.0.0",
    "@types/jasmine": "~3.3.13",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~12.0.8",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.3.1",
    "protractor": "~5.4.1",
    "ts-node": "~8.2.0",
    "tslint": "~5.17.0",
    "typescript": "3.5.1"
  }

会发现typescript的依赖版本已经最新版本: 3.5.1, 再执行以下命令，为项目指定typescript的版本

1
yarn add typescript@">=3.1 < 3.5"

升级完成，你可以运行ng serve启动项目了。

TAGS