Ionicインストール 環境構築まとめ

インストール時

1:XCodeをインストールする

2:npmをインストールする

3:ionicをインストールする

ーーーーーーーーーーーーーーーー

➜  ~ npm install -g ionic

npm ERR! tar.unpack untar error  などなど

解決策:

1:推奨: パスを設定

➜ ~ npm config set prefix ~/npm
➜ ~ export PATH="$PATH:$HOME/npm/bin"

2:強制的に実行

sudo npm install -g ionic

参考 Stackoverflow etc.

ーーーーーーーーーーーーーーーーーーー

4:ionicで新しいプロジェクトを始める

ーーーーーーーーーーーーーーーーーーー

 

➜ ~ ionic start myproject
******************************************************
Dependency warning - for the CLI to run correctly,
it is highly recommended to install/upgrade the following:

Please install your Cordova CLI to version >=4.2.0 `npm install -g cordova`
Install ios-sim to deploy iOS applications. `npm install -g ios-sim` (may require sudo)
Install ios-deploy to deploy iOS applications to devices. `npm install -g ios-deploy` (may require sudo)

******************************************************
Creating Ionic app in folder /Users/home/myproject based on tabs project
Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
[=============================] 100% 0.0s
Downloading: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip
[=============================] 100% 0.0s
Updated the hooks directory to have execute permissions
Update Config.xml
Initializing cordova project
Adding in iOS application by default
Added ios platform

♬ ♫ ♬ ♫ Your Ionic app is ready to go! ♬ ♫ ♬ ♫

Make sure to cd into your new app directory:
cd myproject

To run your app in the browser (great for initial development):
ionic serve

To run on iOS:
ionic run ios

To run on Android:
ionic run android

To test your app on a device easily, try Ionic View:
http://view.ionic.io

Create an ionic.io account to send Push Notifications and use the Ionic View app?

 


+---------------------------------------------------------+
+ Extra! Extra! Fresh Ionic updates for June 2016
+
+ Ionic 2 Beta is out! Try the next generation of Ionic
+ http://ionicframework.com/docs/v2/getting-started/installation/
+
+ Test and share your Ionic apps easily with Ionic View
+ http://view.ionic.io
+
+ Building enterprise apps? Ionic Enterprise Framework comes with the support and features you need
+ http://ionic.io/enterprise
+
+---------------------------------------------------------+

ーーーーーーーーーーーーーーーーーーー

5:念のためインストールするべきと言われたものをインストールする

ーーーーーーーーーーーーーーーーーーー

4の注意書きより:

 

Install your Cordova CLI to version >=4.2.0 `npm install -g cordova`
Install ios-sim to deploy iOS applications. `npm install -g ios-sim` (may require sudo)
Install ios-deploy to deploy iOS applications to devices. `npm install -g ios-deploy` (may require sudo)

 

➜ ~ npm install -g cordova
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

~ npm install -g ios-sim

➜ ~ npm install -g ios-deploy
> ios-deploy@1.8.6 preinstall /Users/HOkaniwa/npm/lib/node_modules/ios-deploy
> ./src/scripts/check_reqs.js && xcodebuild

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!! WARNING: You are on OS X 10.11 El Capitan, you may need to add the
!!!! WARNING: `--unsafe-perm=true` flag when running `npm install`
!!!! WARNING: or else it will fail.
!!!! WARNING: link:
!!!! WARNING: https://github.com/phonegap/ios-deploy#os-x-1011-el-capitan
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
=== BUILD TARGET ios-deploy-lib OF PROJECT ios-deploy WITH THE DEFAULT CONFIGURATION (Release) ===

 

いろいろ exportしているログが表示されたのち

 

** BUILD SUCCEEDED **

/Users/**home**/npm/bin/ios-deploy -> /Users/**home**/npm/lib/node_modules/ios-deploy/build/Release/ios-deploy
ios-deploy@1.8.6 /Users/**home**/npm/lib/node_modules/ios-deploy

 

ーーーーーーーーーーーーーーーーーーー

 6:プロジェクト開始からサーバでの提示、エミュレータの起動

$ ionic start myApp blank
$
cd myApp

$ ionic serve
$ ionic platform add ios $ ionic build ios $ ionic emulate ios

このままにしてても大丈夫だったエラー?:

➜ firstApp ionic emulate ios

You have been opted out of telemetry. To change this, run: cordova telemetry on.
Using this version of Cordova with older version of cordova-ios is being deprecated. Consider upgrading to cordova-ios@4.0.0 or newer.
cp: no such file or directory: /Users/*home*/ionic_projects/firstApp/resources/ios/icon/icon-40@3x.png

 

ーーーーーーーーーーーーーーーーーーー

7:bower, gulpをインストール

インストールするコマンドは通ったが、パスについてのログが出る。

そして、コマンドが見つからないというエラー:

➜ npm install -g bower
/Users/**home**/npm/bin/bower -> /Users/**home**/npm/lib/node_modules/bower/bin/bower
bower@1.7.9 /Users/**home**/npm/lib/node_modules/bower
➜ bower
zsh: command not found: bower

 

解決策:

➜ export PATH=/Users/**home**/npm/bin:$PATH
➜ export PATH=/Users/**home**/npm/lib/node_modules/bower/bin:$PATH 

 

ーーーーーーーー

既存のプロジェクトで使えなくなった時にすること

npm install -g ionicnpm install -g ionic/Users/name/ionic_projects/bin/ionic -> /Users/name/ionic_projects/lib/node_modules/ionic/bin/ionic

 

export PATH="$PATH:$HOME/ionic_projects/lib/node_modules/ionic/bin" 

 

 

ionicframework.com

 

Ionic Framework Tutorial