Angularをアップデートやテストをするにあたって得た知見を書きました。

1. アップデートとテスト

2. 自己紹介
名前：キグレアキヒコ
職業：フリーランス プログラマ
サラリーマンの聖地界隈で、Angular 書いています

3. Profiee 始めました
https://profiee.com/i/lifewood

4. 今日お伝えしたい事

5. • 公式ドキュメント
• ソースコード
これらをきちんと読もうな！
※自戒を込めて

6. V6 => v8 での分かった事

7. https://update.angular.io/
ここで手順を確認せずに・・・・
$ ng update --all --fource

8. やるなよ！
絶対に、やるなよ！

9. やって分かった事その１
関連するパッケージの最新バージョン情報が一律把握できた

10. やって分かった事その２
ERROR in The Angular Compiler requires TypeScript
>=3.4.0 and <3.5.0 but 3.5.1 was found instead.
その時は、冷静にpackage.jsonの以下の修正をして、
再度 npm i "typescript": "~3.5.0" => "typescript": "~3.4.5”
※現在は、v3.5.3でも大丈夫です。

11. やって分かった事その３
ポリフィル
core-jsが、v2.x => v3.x になった影響で、
tsconfig.jsonのpathsに追記が必要になりました。

13. やって分かった事その４
コードコンバート
• loadChildren
• v6 => v8 NG
• v7 => v8 OK

15. コードコンバート
• ViewChild第二引数
• v6 => v8 OK
• v7 => v8 OK

16. やって分かった事その５
karma, jasmineのバージョンも
同時にアップしたので、
テストコードの修正も発生しました。

17. バージョンアップ前
spyOn(~~~, 'xxx').and.returnValue(() => of());
xxx: http系関数
バージョンアップ後
spyOn(~~~, 'xxx').and.returnValue(() => of(new HttpRespopnse()));
spyOn(~~~, 'xxx').and.returnValue()

18. バージョンアップ前
const spy_scroll = spyOn(component, 'scrollEvent').and.callThrogh();
spy_scroll.calls.argsFor(0)[0].target.scrollTop;
spy_method.calls.argsFor(0)[0].subscribe(() => {}):
バージョンアップ後
(<HTMLElement> spy_scroll.calls.argsFor(0)[0]).target) .scrollTop
(<Observable<void>> spy_method.calls.argsFor(0)[0]) ) .subscribe(() => {})
argsFor

19. やって分かった事その６
rxjs v6.3.3 => 6.5.2
Observable.create => new Observable();
https://git.io/JensD
Subject.create => new Subject();
https://git.io/JensQ

20. rxjs v6.3.3 => 6.5.2
tap(undefined, () => {}) => tap( { complete(): () => {} } )
tap(undefined, () => {}) => tap( () => {} )
https://git.io/Jensd

21. rxjs v6.3.3
rxjs v6.5.2

22. やって分かった事その７
Ivy
ERROR in There is no format with import statements
in '/Users/lifewood/work/ng-migrate-
sample/node_modules/ng-click-outside' entry-point.

23. 対処
ライブラリのgithubにissueがあるかつ
ビルドエラーになった時にivyオプションの使用を
取りやめました。
追記：その後
解決されました。

24. やって分かった事その８
Swagger Code Generator
コード生成後にビルドエラーになった定義
• multipart/form-data
• パラメータにblobを使用

25. 対処
対象のコードを正規表現で置換するシェルを
実装して対処しました。
Before
let formParams: { append(param: string, value: any): void; };
Afeter
let formParams: { append(param: string, value: any): void | HttpParams; };

26. ユニットテストを実装して分かった事

27. 状況
• コンポーネント数
• テスト数: 約2400件
テスト開始当初
• jenkins 実行時間： 約60分
テスト改善後
• jenkins 実行時間： 約12分

28. テスト改善の為にやったこと
• モックを作る
• スタブを作る
• NO_ERRORS_SCHEMA を実装する
• 不要なモジュールをインポートしない
• 画面系モジュールのインポート実装を削除しただけで、
２〜３秒変わった
https://angular.jp/guide/testing

29. テスト実装効率化の為にやったこと
*.spec.tsのみのビルドスクリプトを実装

30. 今現在の状況
• component: 406
• module: 26
• service: 57
• helper: 19
• pipe: 11
• model: 42
• enum 23
• const: 14
test 件数: 3353(skip: 158)
手元計測：約18min

31. 告知１ 10/05
第11回：Angular もくもく会@グンマー

32. 告知２ 11/09
第1回 ng-saitama@大宮

33. ご清聴有難うございました！