notebook

都内でWEB系エンジニアやってます。

4から5へバージョンを上げる

Angular TypeScript

やったこと、躓いたこと

環境
angular 4.4.5 -> 5.1.3
node v7.9.0

Update Guideを元に事前にできるものは修正しておく

Angular Update Guide - Beta

https://angular-update-guide.firebaseapp.com/angular-update-guide.firebaseapp.com

  • packageをインストールする
npm install --save-dev @angular/cli@latest
npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'
npm install typescript@2.4.2 --save-exact
npm install --save bluebird license-webpack-plugin
npm install --save ngx-bootstrap@latest

bluebird license-webpack-pluginはサーバ起動時足りないといわれたので入れた

ngx-bootstrap 1.9.3の時点ではdatepickerでtemplateタグを使っているようでAOTコンパイルが通らなかったのでバージョンを最新にした

: "let-" is only supported on ng-template elements. ("
  </thead>
  <tbody>
    <template ngFor [ngForOf]="rows" [ERROR ->]let-rowz="$implicit" let-index="index">
      <tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].sec")
: "let-" is only supported on ng-template elements. ("
  </thead>
  <tbody>
    <template ngFor [ngForOf]="rows" let-rowz="$implicit" [ERROR ->]let-index="index">
      <tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].sec")

CurrencyPipe

CurrencyPipeを使っていた箇所で警告がでた

common.js:6230 Warning: the currency pipe has been changed in Angular v5. The symbolDisplay option (third parameter) is now a string instead of a boolean. The accepted values are "code", "symbol" or "symbol-narrow".

実装箇所は下記

  {{ params.value | currency:'JPY':true }}

調べてみると下記のようだ

パイプのtransformメソッドの引数が変わった模様

    3. Currency pipe
    * Breaking change:
      - the default value for `symbolDisplay` is now `symbol` instead of `code`. This means that by default you will see `$4.99` for `en-US` instead of `USD4.99` previously.

    * Deprecation:
      - the second parameter of the currency pipe (`symbolDisplay`) is no longer a boolean, it now takes the values `code`, `symbol` or `symbol-narrow`. A boolean value is still valid for now, but it is deprecated and it will print a warning message in the console.

    * Features:
      - you can now choose between `code`, `symbol` or `symbol-narrow` which gives you access to more options for some currencies (e.g. the canadian dollar with the code `CAD` has the symbol `CA$` and the symbol-narrow `$`).

第二引数にbool値じゃなくシンボルなどを入れろということらしい

  {{ params.value | currency:'JPY':'symbol' }}

or

  {{ params.value | currency:'JPY':'symbol-narrow' }}

or

  {{ params.value | currency:'JPY':'code' }}

省略するとシンボルが適用される模様

で対応ok

HttpClientへの置き換え

Http -> HttpClientへの置き換えは下記記事の内容で対応した

HttpClientでGetパラメータをセットする - notebook

swfz.hatenablog.com

まとめ

そんなに大きな規模のアプリケーションではなかったが結構修正がありました

でかい規模だとテスト書かないと厳しいだろうなーといった印象を受けたのでそろそろテスト書かないと...