升级Angular项目从4.x版本到5.x版本时的注意事项
我将我参与的项目中的Angular版本从4系升级到了5系。在此过程中做了一些记录。顺便提一下，作为开发环境，我使用的是angular-seed而不是Angular CLI。
升级angular-seed的版本
通过将最新的angular-seed导入到当前存储库中，可以将Angular更新至当前的最新版本（v5.0.1）。
为了将angular-seed存储库合并到当前存储库中，使用git subtree。
首先，将angular-seed的仓库注册为外部仓库upstream。
$ git remote add upstream https://github.com/mgechev/angular-seed
使用-P选项指定任意目录，导入已注册的外部存储库upstream的内容。
$ git subtree pull -P frontend/ upstream master
参考网站
-
- Gitのsubtreeについてのまとめ
- Git – サブツリーマージ
解决冲突
一旦注意しなければならないのは、必ずしもangular-seedの最新版を取り込むとコンフリクトが発生することです。特にpackage.jsonやyarn.lockといったファイルはかなり混乱しています。
-
- 自分で追加したパッケージは残す
- 追加していないパッケージを取り込み先を反映する
安装相关软件包。
解决package.json和yarn.lock之间的冲突后，还需要将相关包保持最新状态。可使用yarn或npm进行安装。
# yarnでインストールする場合
$ yarn install
# npmでインストールする場合
$ npm install
在这个时候，尝试运行npm start来启动应用程序。如果冲突得到解决并且包正确安装，应该能够成功启动。不过，不应该期望它完全运行正常。
安装@anular/http 5.x系列
Angular 5之后，用于进行HTTP请求的模块@angular/http已经不推荐使用。改为使用从Angular 4.3开始添加的@angular/common/http中的HttpClient。由于这部分需要大量修正工作，目前为了先使其正常工作，我决定更新现有的@angular/http。
用以下命令安装 @angular/http 的最新版本。
# yarnでインストールする場合
$ yarn add @angular/http
# npmでインストールする場合
$ npm i -S @angular/http
如果浏览器的控制台出现以下错误，请检查：
Uncaught SyntaxError: Unexpected token <
在 angular-seed 的 project.config.ts 文件中添加以下内容。
{ name: '@angular/http', path: 'node_modules/@angular/http/bundles/http.umd.min.js' },
调整RouterModule的配置
如果RxJS的版本是5.5.3的话，在Angular 5中会出现无法正确进行路由的问题。所以建议降级到5.5.2版本就可以解决问题。
- Angular 5.0.5 doesn’t work with RxJS
由于实际上在这一次的angular-seed更新中，RxJS的版本变成了5.5.3，所以出现了以下类似的错误。
ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence
如果RouterModule的设置如下：
@NgModule({
imports: [
RouterModule.forChild([
{ path: 'home', component: HomeComponent }
])
],
exports: [RouterModule]
})
在添加 pathMatch: ‘full’ 后，路由将按照以下方式正常进行。
@NgModule({
imports: [
RouterModule.forChild([
{ path: 'home', component: HomeComponent, pathMatch: 'full' }
])
],
exports: [RouterModule]
})
安装 @angular/material 5.x系列
暂时来说，我们已经恢复到正常运行了。但是在我们的项目中，我们使用了@angular/material，所以我们决定也将其更新到5.x系列。以前我们使用的是2.0.0-beta.12版本。
使用以下命令进行安装。这次如果不指定版本，最新版本将不会被安装，所以指定了版本进行安装。
# yarnでインストールする場合
$ yarn add @angular/material@5.0.4 @angular/cdk@5.0.4
# npmでインストールする場合
$ npm install --save @angular/material@5.0.4 @angular/cdk@5.0.4
如果浏览器的控制台出现以下错误，
Uncaught SyntaxError: Unexpected token <
在 angular-seed 的 project.config.ts 中添加包。根据我们的情况，似乎没有加载@angular/cdk的accordion和layout，所以请添加以下内容。
{
name: '@angular/cdk/accordion',
path: 'node_modules/@angular/cdk/bundles/cdk-accordion.umd.js'
},
{
name: '@angular/cdk/layout',
path: 'node_modules/@angular/cdk/bundles/cdk-layout.umd.js'
},
总结
总之，现在基本上和4.x系列的时候一样工作了。我要确认我自己添加的包在Angular 5上也能正常工作，如果有什么问题就要解决。另外，从Angular 5开始，采用了RxJS v5.5.2或更高版本，并且操作符的导入方式也有所变化。我也希望逐步进行相应的调整。同样地，正如我在文章中提到的，我也希望在HTTP请求方面使用@angular/common/http下的HttpClient，因为它得到推荐。
