書籍「Angularアプリケーションプログラミング」における開発環境構築で躓いた

　Anuglarの学習を開始したところ、開発環境構築の段階で躓居ってしまった。グーグル検索で色々探しまわったが、クリアに記述している記事を見つけられなかった。自分でいろいろ試して解決できたので、その内容をまとめて記す。

　Angularの学習書籍「Angularアプリケーションプログラミング」では、Angular公式が用意している学習教材レポジトリ「quickstart」で開発環境を整える。ここのソースと、現在ダウンロードが可能なフレームワークのバージョンがあっていないため、ビルドができないのである。npm startを実行すると、TS1005エラーでビルドができない。エラー内容は,が無いことを示すものだが、該当ファイルを開いても、,の不足部分は無い。現在ダウンロード可能なTypeScriptとRxjsのバージョンと、プログラム内で利用指定しているバージョンが異なることが直接の原因のようである。.jsonファイルの修正が必要となる。

解決策：installするversion指定を新しくする

1.json ファイルを修正する

　　フォルダ内の最上階層にあるpackage.jsonファイルを修正する。TypeScriptとRxjsのversionを書き換える。

　私の環境でインストール済みのTypeScriptのverが4.8.3のため、4.8.3と修正。rxjsのバージョンは、5.5.12に修正

2. 再度 npm installを実行する

3. 再度 npm start を実行する

上記の手順でnpm start が無事にビルド可能となる。

余談

　configで指定しているバージョンと、現在利用な可能なバージョンが異なることによるエラーであることはすぐに察しがついた。しかし、どのファイルを修正すればいいのか、修正してnpm start してもエラーが出続けていた。

　必要な手順は、jsonのversionを書き換えた後、再度installをすることだった。これに気付くのに時間がかかってしまった。

参考ページ

　FAQ［Angularアプリケーションプログラミング］

　↑著者が自身のサイトで当現象について触れている

追記

第3章で、筆者のサンプルソースをダウンロードし、WEBサーバをnpm start をすると、同様のエラーで起動しない。上記と同じようにpackage.jsonを修正して、npm installから実施し直す必要がある