Corredor

ウェブ、プログラミングの勉強メモ。

Angular4 + Cordova なアプリを作る時の注意点

HTML5とApache Cordovaで始めるハイブリッドアプリ開発 (CodeZine BOOKS)

HTML5とApache Cordovaで始めるハイブリッドアプリ開発 (CodeZine BOOKS)

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.htmlmeta 要素を追加したり、cordova.js を読み込む script 要素を書くのを忘れずに。

ビルドの出力先を dist から www にしておくと楽

.angular-cli.jsonoutDir を変更して、ビルドしたファイルの出力先を www ディレクトリにしておくと楽。ただし、ビルドが失敗すると www ディレクトリが消えたままになり、そのまま cordova コマンドを叩くと「www ディレクトリがないから Cordova プロジェクトじゃないよ」と言われてしまう。$ mkdir www すれば良いが、手作業が入るのでお忘れなきよう。上手いやり方ないもんかな…。

ついでに ./src/tsconfig.jsontypes を消しておくと、型定義ファイルを ./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 を意識せずに作れる。