Angular4 + Cordova なアプリを作る時の注意点
Angular4 + Cordova なアプリを作る時の注意点をいくつか紹介しておく。
だいぶ前に GitHub に Angular4 + Cordova なボイラープレートプロジェクトを上げていて、解説記事を書いた気になっていたのだが、書いていなかったようなので書く。
リポジトリは以下。
ボイラープレートは Angular CLI + Cordova CLI で作る
プロジェクトの雛形は、Angular CLI と Cordova CLI で別々に作り、Angular CLI のフォルダをベースに Cordova CLI で生成されたファイルや index.html をマージすると良いだろう。
# Angular ボイラープレートはこんな感じ
$ ng new angular-cordova --skip-git --skip-commit --style scss --routing
# Cordova ボイラープレートはこんな風に
$ cordova new angular-cordova-boilerplate com.example.angular.cordova angular-cordova
マージした内容は以下のコミットを参照のこと。
index.html に meta 要素を追加したり、cordova.js を読み込む script 要素を書くのを忘れずに。
ビルドの出力先を dist から www にしておくと楽
.angular-cli.json の outDir を変更して、ビルドしたファイルの出力先を www ディレクトリにしておくと楽。ただし、ビルドが失敗すると www ディレクトリが消えたままになり、そのまま cordova コマンドを叩くと「www ディレクトリがないから Cordova プロジェクトじゃないよ」と言われてしまう。$ mkdir www すれば良いが、手作業が入るのでお忘れなきよう。上手いやり方ないもんかな…。
ついでに ./src/tsconfig.json の types を消しておくと、型定義ファイルを ./node_modules/ から拾ってくれるようになるのでオススメ。なんでこれがデフォなんだろうなぁ…？
ng build は --base-href オプションを指定すること
一番大事なのが、ng build する際に --base-href オプションを指定しないと Cordova アプリとして正常に動作しない、ということ。
--base-href オプション未指定の場合は、index.html には <base href="/"> とサイトルートパスが指定されるようになっているのだが、これだと cordova.js などが読み取れなくなる。
正しくするには $ ng build --base-href ./ と指定してビルドし、<base href="./"> と相対パスを指定してやる必要がある。これさえすれば Cordova アプリとして動作する。
Cordova はローカルインストールしても正しく動作しない
Cordova、正しくは cordova-lib パッケージには、dependencies に "npm": "^2.10.x" と記載されている。
Cordova をグローバルインストールした際は、グローバルな位置にいる npm 自身を利用するので、npm の v3 系や v4 系などを利用していても問題ないのだが、Cordova をローカルインストールすると、Cordova 自身が所属する node_modules/ 配下に npm パッケージが存在しないので、この dependencies の記述に従って npm の v2 系を node_modules/ 内にダウンロードしてくるのだ。
このせいで、npm run cordova とローカルインストールした Cordova を使うと、一部のコマンドが正しく動かない。例えば cordova prepare などが失敗する。
残念ながら、Cordova はグローバルインストールして使う前提になっているようなので、ローカルインストールした Cordova は使わない方針にした方が良い。
環境設定回りでの注意点はこのくらい。
Angular の実装に移ってしまえば、あとは Ionic Native を組み合わせたりして Angular アプリとしてコーディングしていくだけで、大抵のことは Cordova を意識せずに作れる。