オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。
すっかりBlogをサボってしまいました。
社内勉強会用の資料作成で、Android＆Kotlinにどっぷり浸かっていました。（言い訳）
気を取り直して、今回は久しぶりのAngularです。
弊社、iOSもAndoridもネイティブでゴリゴリ開発しているのですが、実は、プロジェクト的には減少気味です。
やっぱりアプリの申請とか、色々と気にする事が多いのでしょうね。
代わりにSPAのサイトをレスポンシブで作るプロジェクトがかなり増えています。
そんな中、新たな選択肢として、PWAのプロジェクトも増えています。
と言う事で、今回は、「既存のAngularプロジェクトをPWA化する」を備忘録的に記事にします。
【注意】当記事では、事前準備までを説明していて、実際にPWA化までは行っていません。PWA化のみ見たい方は、「Angular で作られたプロジェクトをPWAにしてみよう。（中編）PWA化の実施」をご覧ください
Angular で作られたプロジェクトをPWAにしてみよう。（中編）PWA化の実施
（１）対象のシステム要件
今回やろうとしていることは以下の通りです。・既存のAngularで作られたSPAサイトをPWA用として新たに作成する。（既存のサイトは残す。つまりコピーしてサイト名変更）
・既存のサイトのAngularバージョンは「7」
・最終的には、Chrome デベロッパーツールのAuditsで、正しくPWA化されている事を確認する。
・その他の機能についてのアップデートは行わない（もっとも少ない対応内容でPWAを実現させる）
では、早速、やって行きましょう！
（２）サイト名（プロジェクト名）変更
まずは、既存のサイト（koma-system-web）をコピーして、名称を「koma-system-pwa」に変更します。サイトのrootディレクトリ名称変更の他に、以下のファイルにもサイト名が記載されているので、合わせて修正します。
angular.json
app.e2e-spec.ts
package.json
（３）Angular 7 から 8 へのアップデート
Angular 8から、CLIによるPWA作成が簡単に出来るようになっているので、まずはAngularのバージョンアップを行います。基本的な作業としては、こちらの手順通りになります。
バージョンは（Angular Version）は、7.0から8.0でいきます。
アプリの複雑度（App Complexity）は・・・・Mediumぐらいですかね、とりあえず。
その他の依存関係（Other Dependencies）ですが、今回のプロジェクトは、AngularJSも混在していませんし、 Angular Material、Express、Hapiも使用していないので、チェックは付けません。
（Express、Hapiは、サーバーサイドレンダリングで使用するものですかね、多分）
パッケージ管理（Package Manager）はnpmを使っているので、npmを選択します。
【更新する前に（Before Updating）】
サイトに記載している手順と注意書き通りに作業を進めて行きます。If you use the legacy HttpModule and the Http service, switch to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (you don't need to map to JSON anymore) and now supports typed return values and interceptors. Read more on angular.io.HttpModuleは使えないからHttpClientModuleに変更してね、と言う事ですね。
HttpClientModuleは、確かAngular 4.3 ぐらいから使えるようになった機能です。
Once you and all of your dependencies have updated to RxJS 6, remove rxjs-compat.rxjs-compatを使っているなら、削除してね、と言う事ですね。
If you use the Angular Service worker, migrate any versionedFiles to the files array. The behavior is the same.Angular Service workerを使っている場合もマイグレーションを行う必要があるようですが、
今回のプロジェクトでは使用していないので、特に何もしません。
【更新作業（During the Update）】
Update to version 8 of the core framework and CLI by running ng update @angular/cli @angular/core in your terminal早速実行していきます
無事に実行できたら（*1）、プロジェクト内を確認してみましょう。
*1）ちなみに、私が試したプロジェクトでは、いくつかのプラグインがAngular8に対応していませんでしたので、代替のプラグインを取り込んだりして、何度もやり直しました。
Angular now uses TypeScript 3.4, read more about errors that might arise from improved type checking.あれ、アップデート後のpackage.jsonを見ると、typescriptが3.5.3にupdateされているけど、良いのかな・・・？
Make sure you are using Node 10 or later.こちらも念の為確認
$node --version v10.14.1うん、大丈夫そう。
【更新後作業（After the Update）】
では、最後に、「ng update」を実行しますが、その前にちょっと試しに「ng update --all」をやってみました。
すると・・・・
Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.6", would install "3.6.3") Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.6", would install "3.6.3"). Package "@angular/core" has an incompatible peer dependency to "zone.js" (requires "~0.9.1", would install "0.10.2"). Incompatible peer dependencies found. Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together. You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.色々出てますが、TypeScriptのバージョンで怒られているものはないですね。
3.5.3は大丈夫なんだ・・・。
と言う事で、地道に「ng update」で更新が必要なものを探ります。
$ ng update
Using package manager: 'npm'
Collecting installed dependencies...
Found 54 dependencies.
We analyzed your package.json, there are some packages to update:
Name Version Command to update
--------------------------------------------------------------------------------
@ngrx/store 7.4.0 -> 8.3.0 ng update @ngrx/store
と言う事なので、ひとまず、「ng update @ngrx/store」でngrxだけ上げます。
これで、「ng build」してみると・・・・
An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-angular:dev-serverエラーになってしまいました。
と言う事で、「ng update @angular-devkit/build-angular」も実行します。
そして、最後の最後に「npm audit fix」で、脆弱性が発生しているパッケージなどのチェックと修正を同時に行ってしまいます。
これで、「Angular 7 から 8 へのアップデート」は完了です。
と言う事で、すいません、長くなってしまったので、続きは中編に記載します。
（同時に記事公開しますので、許してください）
次回：Angular で作られたプロジェクトをPWAにしてみよう。（中編）PWA化の実施
Angular , PWA
0 件のコメント:
コメントを投稿