自作アプリ「BookSelf」に持ってるものリストの表示画面を追加

自作アプリ「BookSelf」に持ってるものリストの表示画面を追加しました。

追加にあたり紆余曲折あり、同時にいろいろ改修、修正を実施してしまいかなり時間を要しました。（開始から1ヵ月ぐらい）実施した内容は以下となります。

angularのバージョンアップ 2.31から5.2.10へ
angular-cliのバージョンアップ 1.0.0から1.7.4へ
bootstrapのバージョンアップ 3.3から4.1へ
package.jsonの整備
ナビゲーションバーの作成（bootstrapとng-bootstrapを使用しての作成）
Paginationのng-bootstrap化
持っているものリスト表示の追加
画面デザインの一部変更

とりかかってしまった起因は bootstrapのサンプルをマネしてヘッダーの作成→bootstrapのドロップダウンが動かない→ng-bootstrapが必要なことを理解（ここまではあまりこれの意味を理解してなかった）→ng-bootstrapの最新バージョンを確認するとAngularのバージョン古すぎと気づく→バージョンアップ作業に挑む→package.jsonの意味を理解、汚くねとなる→バージョンアップした結果画面崩れたので修正→やっとリスト画面作成

すでに記憶がやばいが覚えてる範囲を記録します。

angularのバージョンアップ 2.31から5.2.10へ

angular-cliのバージョンアップ 1.0.0から1.7.4へ

package.jsonの整備

npm update @angular/cli
rm -r node_modules
npm cache clean

packag.jsonのdependenciesとdevDependenciesを削除。 npm installコマンドで一からインストールし、package.jsonを整理。

package.jsonのdependenciesに書き込んでインストール npm install --save ○○

devDependenciesに書き込んでインストール（開発時に必要なライブラリ） npm install --save-dev ○○

コンパイルが通らなかったソースの修正

型指定がおかしいからエラーになっていたけど、もともとのほうが怪しい作りになっていたのでチェックが厳しくはなっているってことかなと思います。 anyがあまり好きではないので少し微妙。。。変更ポイントわかるようにGitの変更差分をコピー（逆にわかりにくい？）

@@ -13,11 +13,13 @@ export class BookapiService {
    }
 
    //対象がない場合は空の配列と0を返却
-   public search(searchWord: string, page: number = 1): Observable<[BookItem[], number]> {
+   public search(searchWord: string, page: number = 1): Observable<any> {
        var bookApiResult;
        
        if(searchWord == '') {
-           return Observable.of([[], 0]);
+           let totalItems: number = 0;
+           let bookItems: BookItem[] = [];
+           return Observable.of({bookItems, totalItems});
        }
 
        let paramsMap = this.createParamMap(searchWord, page);
@@ -43,7 +45,7 @@ export class BookapiService {
                let totalItems: number = bookApiResult.totalItems;
                let bookItems: BookItem[] = this.createBookItems(bookApiResult, bookPossesions);
 
-               return [bookItems, totalItems];
+               return {bookItems, totalItems};
            });
    }

ナビゲーションバーの作成

持っているものリスト表示の追加

リスト表示画面についてはメイン画面にリスト等に遷移するためのナビゲーションバーを追加しました。「List」をクリックでリスト画面に遷移します。
メイン画面（ヘッダーが追加） f:id:rui_phone:20180610163051p:plain

リスト画面（持っている本の一覧を表示） f:id:rui_phone:20180610163107p:plain

ソースはGithubにコミット済みです。（ずっと前に）
いろいろ他のことやってたりして下書きのままでずっと止まってたので、いったんここでブログ更新します。。。
こまめなコミット、ブログ記録を改めて心がけよう。

メモ的な何か

技術的な私のメモになる予定です。