kasaharu / annictor Goto Github PK

対応内容

• @angular/compiler-cli が 7.0.0以上になったので、tsconfig の angularCompilerOptions の設定を削除できるか確認する
• 不要になった rxjs-compat パッケージの削除

学習内容

• https://stackoverflow.com/questions/50462402/the-angular-compiler-requires-typescript-2-7-2-and-2-8-0-but-2-8-3-was-found

対応内容

• AnimeListComponent を router に紐付ける

学習内容

• <router-outlet> を配置してコンポーネントを出力する
• RouterTestingModule でテストをする

対応内容

• Service Worker が動くようにする

学習内容

• @angular/service-worker をインストールする

$ yarn add @angular/service-worker
$ ng set apps.0.serviceWorker=true

• AppModule での import
• Service Worker の設定ファイル ngsw-config.json を配置

対応内容

• ページを開いたときに今期の情報を表示する

学習内容

• 期間を扱うサービス(PeriodService)を用意し、今期を計算できるようにする

対応内容

• xxx

学習内容

• https://github.com/ngrx/platform/blob/master/docs/effects/testing.md

対応内容

• xxx

学習内容

• xxx

TODO

• header 領域の作成
  • title を header 領域に表示
• main 領域の作成

対応内容

• 対応前のテストカバレッジ結果 : https://circleci.com/gh/kasaharu/annictor/904

学習内容

• xxx

対応内容

• https://gist.github.com/kasaharu/476660a92fa9558b9760ec52265d974c にアップデートする

学習内容

• xxx

対応内容

• NgRx の導入
• anime の情報を NgRx で管理する
• Store を介して状態のやり取りをする Container を用意する
• seasonId を NgRx で管理する

学習内容

• https://github.com/ngrx/platform
• https://itnext.io/ngrx-best-practices-for-enterprise-angular-applications-6f00bcdf36d7

各種コマンド

• パッケージインストール

$ yarn add @ngrx/store
$ yarn add @ngrx/effects

• RootStoreModule と Store の作成

$ ng g module root-store —-flat false —-module app.module.ts
$ ng g interface root-store/root-state

• AnimeStoreModule の作成

$ ng g module root-store/anime-store --flat false --module root-store/root-store.module.ts

• SeasonStoreModule の作成

$ ng g module root-store/season-store --flat false --module root-store/root-store.module.ts

#25 で PC レイアウトを実装
#28 で SP レイアウトを実装

memo

• ボーダー色 : #e1e4e8

対応内容

• cache を使って package install を何度も実行しないようにする

学習内容

• xxx

対応内容

• devDependencies でも major ver up は auto merge しないように Renovate の設定を見直す

学習内容

• xxx

対応内容

• 今表示している期間の前・後に移動できるようにする
• 今表示している season の前後を計算できるようにする

学習内容

• router.navigate のテストを書いた

対応内容

• Angular CLI のアップデートをする

$ yarn add --dev @angular/cli@^6.0.1

• マイグレーションを実施

$ ng update @angular/cli --migrate-only --from=1.7.3

学習内容

• https://lacolaco.hatenablog.com/entry/2018/04/09/070000

#36
#37
#39

対応内容

• Firebase にデプロイする仕組みを作る
  • $ firebase init

対応内容

• xxx

学習内容

• https://angular.jp/guide/language-service

対応内容

• 最初から使うことがわかっているなら ng new 時点でオプションを付与する
• 今回は途中追加なので下記

$ ng generate module app-routing --flat --module=app

学習内容

• https://angular.jp/tutorial/toh-pt5

CircleCI 上 でエラーになるので修正する

対応内容

• SeasonComponent という対象シーズンを切り替えるためのコンポーネントを用意
• セレクトボックスを切り替えることで選択したシーズンの一覧を表示する

学習内容

• @Input デコレータを使用し、親コンポーネントからデータを受け取る
• @Output デコレータを使用し、親コンポーネントへデータを渡す
  • 親へ渡す際には EventEmitter を使用する

対応内容

• SeasonComponent を AnimeListComponent 配下に配置する
  • AppComponent 配下には AnimeListComponent だけ置くようにする
• AnimeListComponent は Input を取らないようにする
  • AppComponent に router-outlet をおけるようにしておくため

対応内容

• Service Worker の設定を見直す
  • ref. https://angular.jp/guide/service-worker-intro

学習内容

• xxx

対応内容

• Store にある Season state を元にアニメの期間を表示する

学習内容

• xxx

対応内容

• 人気アニメ一覧を作成する

学習内容

• xxx

対応内容

• Http 関連の Module, Service を使っていないことを確認
• RxJS 6 で廃止される機能を削除

学習内容

• https://kasaharu.kibe.la/@kasaharu/338 に詳細を記載
• https://kasaharu.kibe.la/@kasaharu/339 に移行

対応内容

• src/environments/templates/ 配下に environment.ts と environment.prod.ts を配置
  • 書き換えたい箇所をプレースホルダーにしておく
• node script を用意し プレースホルダーの部分に process.env から取得した環境変数をセット
• npm scripts に prebuild コマンドを用意し TypeScript のコンパイルと実行おこなう

参考

https://qiita.com/TsuyoshiUshio@github/items/4243ee860b217534c0d2

対応内容

• Angular v7.x への移行で設定の変更が必要なようなのでみなす

If you use the Angular Service worker, migrate any versionedFiles to the files array. The behavior is the same.

学習内容

• xxx

対応内容

• xxx

学習内容

• https://github.com/ngrx/platform/blob/master/docs/store-devtools/README.md

TODO

• Circle CI 上でビルド、テストできるようにする

メモ

• Circle CI で使うバージョンは circleci/node:8.9.4-stretch-browsers
  • ng test には Browser が必要になるため
• ng test は single-run で実行するようにする
• .circleci/config.yml に設定ミスがある場合は CircleCI のページの Workflows から確認できる
  • requires を設定するときはインデントに注意

TODO

• 一覧の取得と表示
  • デザインは気にしない

メモ

• AnimeListComponent 作成

$ ng generate component componets/anime-list

• AnimeService の作成

$ ng generate service services/anime

• AnnictModel の作成

$ ng g interface models/Annict

対応内容

• watch false のテスト実行コマンドを npm scripts に登録する
• テスト実行時にカバレッジを表示するように設定を変更する
• CircleCI の artifacts にカバレッジを出力する

学習内容

対応内容

• xxx

学習内容

• xxx

対応内容

• change -> selectionChange

学習内容

• https://github.com/angular/material2/blob/master/CHANGELOG.md#600-beta5-2018-03-23
  • 5.0.0 で deprecated, 6.0.0 beta.5 で remove

対応内容

• スケジュールの変更(週末のみ)
• まとめたほうがいいパッケージはあるか？
  • RxJs とテスト用のパッケージをそれぞれまとめる
• PR にラベルを付与する

学習内容

• https://renovatebot.com/docs/configuration-options/

対応内容

• components ディレクトリが componets/ になっているのでリネームする

学習内容

• xxx

対応内容

• xxx

学習内容

• xxx

対応内容

• Angular Material 系のライブラリインストール

$ yarn add @angular/material @angular/cdk
$ yarn add @angular/animations
$ yarn add hammerjs

• Angular Material のテーマ読み込み
• Angular Material Icon を使う準備
  • ここ のリンクを import する
  • アイコンは ここ から選べる

TODO

• normalize.css を用意
• normalize.css のインポート

メモ

• https://github.com/necolas/normalize.css/ から取得

対応内容

• UI を刷新する