Category Archives: Ionic Framework

How to Debug website on Mobile Device – 如何在手機上做網頁debug / debug HTML5 Hybrid App

最近開始研究使用Ionic Framework 來開發一些Hybrid App [用HTML5/ Javascript / CSS 和一些 Library 來開發..之後可以CompileAndroid/IOS/Windows Phone 的應該程式的 開發工具]
不久之後便發現要Debug這些Hybrid App很像不太容易..
因為他們不像可以在Android StudioDebug..
他們又沒有Console Windows可以用來檢查 Console.log的結果

做了一會research之後發現

原來我們可以使用Google Chrome 來 Debug我們手機上的網頁的

解決方法:
我們可以在Google ChromeAddress bar 上輸入以下網址

chrome://inspect/#devices

e.g. try the link below
chrome://inspect/#devices

之後可以按一下Inspect 去 選擇inspect那一個 Web AppWebsite
Chrome Inspect devices

之後便可以像平時 debug website 一樣 debug這個 Web App或 Website 了
Chrome Developer Tools - Mobile Web App

Hope you find it useful


style=”display:inline-block;width:336px;height:280px”
data-ad-client=”ca-pub-4266560994470212″
data-ad-slot=”3788424641″>

‘bower’ is not recognized as an internal or external command

今天嘗試使用 bower來安 “ngCordova” 時出現以下的錯誤信息
在之前的網誌裡有和大家分享介紹..如果要在Ionic Framework中使用 “ngCordova
是要用 bower來安裝的

Ionic troubleshooting – ngcordova Failed to instantiate module starter due to

bower install -SF ngCordova

“‘bower’ is not recognized as an internal or external command,
operable program or batch file.

原因是因為在這部電腦上沒有安裝 Bower

解決方法十分簡單
我們可以使用NodeJsCommand Prompt 之後輸入NodeJs指令來安裝
– g的意思 Install Globally 是給所有使用者用

解決方法

npm install -g bower

Install Bower via NodeJs npm
Hope you find it useful

Ionic troubleshooting – ngcordova Failed to instantiate module starter due to

今天嘗試跟著 ngCordova 的例子和文章
http://ngcordova.com/docs/
嘗試使用ngCordova plugins/Library/ wrapper 來開發一些 Android 程式
我在他的”Custom Build” 頁面上下載了我需要的ngCordova Plugins
ngCordova Custom Build

之後自行在我的ionic 資料夾上建立了 “lib/ngCordova/dist” 資料夾來儲存這個js 檔

之後在”js/app.js“上登記了 ‘ngCordova

E.G.

angular.module('starter', ['ngCordova', 'ionic', 'starter.controllers'])

Add ngCordova Module to Ionic's app.js
誰不知當我在preview的的Ionic Application時出現空白頁面

在檢查Google Chrome Console上看到以下的錯誤信息

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ngCordova due to:
Error: [$injector:nomod] Module ‘ngCordova’ is not available! You either misspelled the mod……1)

[$injector:modulerr] Failed to instantiate module starter due to

做了一會research之後發現..
原來我們需要使用 bower來安裝 ngCordova 才能使用的

解決方法

我們可以在這個IonicApplication 資料來上
NodeJsCommand prompt輪入以下 指令來安裝

bower install -SF ngCordova

Bower Install ngCordova

如果嘗試安裝 Bower時出現問題..,可以嘗試參考以下網誌..看看能不能解決

‘bower’ is not recognized as an internal or external command

安裝完成後再次執行這個Ionic Application

ionic serve

Ionic Application 成功在Browser上顯示正常資訊了
Ionic Application with ngCordova Plugins

Hope it solve your issue

Ionic platform add android Error: spawn ENOENT

今天嘗試跟著Ionic Framework 的時
http://ccoenraets.github.io/ionic-tutorial/index.html
當我嘗試使用ionic platform 指令加入Android Platform

ionic platform add android

出現以下的錯誤信息
events.js:72
throw erl // Unhandled ‘error’ event
Error: spawn ENOENT

Ionic Framework - Error: spawn ENOENT

這個錯誤是在我更新了Ionic Framework CLI 之後才出現的

How to Update Ionic CLI- 如何更新Ionic Framework CLI

做了一會research之後
找到了暫時的解決方法

解決方法:
我們只需要暫時安裝另一個版本的 Ionic Framework CLI便可以解決這個問題

E.g. 我安裝了 ionic 1.1.9 beta1
NodeJscommand prompt 上輸入以下指令便可以了

npm install -g ionic@1.1.9-beta1

Install Ionic Framework 1.1.9 beta 1

安裝完成後..再次執行

ionic platform add android

ionic platform 指令加入Android Platform
出現”Platform android already added” 應該是正常的..因為我之前嘗試使用cordova 指令來加入Android Platform 來解決”Error: spawn ENOENT” 的問題…

Ionic Framework:  Platform android already added

之後再用 ionic 指令來Build 這個程式

ionic build android

最後使用Ionic 指令嘗試在 Android Emulator上 執行這個Ionic Hybrid App

ionic emulate android

Ionic Tutorial run on Android Emulator

Hope it solve your issue.

How to Update Ionic CLI- 如何更新Ionic Framework CLI

由于Ionic Framework還是在Beta中他的程式的更新會很快
所以我便想怎樣可以安裝到最新版本的Ionic FrameworkCLI [Command Line Interface] 呢

原來解決方法十分簡單

解決方法
我們可以在NodeJs Console上輸入以下指令便可以了

npm update -g ionic

Update Ionic Framework CLI
* 將來學會如何更新Ionic Framework [Core] 再和大家分享

Happy Coding

Ionic – Preview Application on Browser – 怎樣預覽Ionic Framework 的程式

終於開始了嘗試使用Ionic Framework 來開發 Hybrid 程式

開發方法是使用HTML5 JavascriptCSS
所以我估計可以直接開啟 Ionic Project 資料夾上的 html檔案便可以看到程式的介面大概是怎樣的

誰不知 開啟 index.html後他只出現空白的畫面

那麼我們可以怎樣預覽我們用HTML/JS 寫出來的程式 Layout
做了一會research 之後發現
原來原本的Ionic Framework是有教的..
http://ionicframework.com/docs/guide/testing.html

解決方法:
我們只需要使用NodeJsconsole到想預覽的Ionic Application的主目錄上
輸入

ionic serve

ionic serve command to preview your Ionic Framework application

之後便可以在瀏覽器上預覽你的hybrid程式了

在輸入完指令後他便會輸出網址到console
你可以在瀏覽器上輸入那個網址來預覽[如果你的browser不會自動開啟的話]
Ionic Application - Tabs Sample App

Happy coding

Ionic – An error occurred while listing Android targets – Add platform target for building an Ionic app

繼續跟著Ionic Framework的教學來建立我的Ionic Framework Hello World Project時
雖然是可以成功安裝
http://ionicframework.com/getting-started/

但是在執行指令去Add Android platform

ionic platform add android

出現以下的錯誤信息
Error from platform command – Add platform target for building an Ionic app
Error from platform command - Add platform target for building an Ionic app

做了一會research後終於找到解決方法

原來又是要設定一些”Environment Variables/ 環境變數” 的問題
[暫時所出現的問題..大部分都是因為電腦上沒有預先設定好一些”Environment Variables/ 環境變數” 所以出現的]

解決方法
在之前的網誌介紹了大家怎麼去設定”Environment Variables / 環境變數
E.G.
按一下”Advanced System Settings/進階系統設定” -> “Advanced tab/進階 分頁” ->”Environment Variables / 環境變數” 按一下

Environment Variables Settings
在”System variable / 系統變數” 上新增 “ANDROID_HOME

之後在 Variable Value 上加上你電腦上的Android SDK的資料夾
Set up System Variables on Windows for ANDROID_HOME

由于我之前是使用Android Studio的關係
所以我的Android SDK 是在Android Studio的資料夾 [可能和你的不一樣]
我的是在以下的路徑
C:\Program Files (x86)\Android\android-studio\sdk
Android Studio Android SDK Folder Path

完成後

之後選擇”System variable / 系統變數” 上的 “path
在最後一段文字上輸

;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

這會使用你之前定義的ANDROID_HOME變數再加上tools / platform-tools 來話給電腦聽你的Android SDK Toolsplatform tools 在那裡

Environment Variables -> Path for Android SDK Tools and Platform tools path

完成後可以回到Ionic / NodeJsconsole上再次執行

ionic platform add android

問題應該解決了 – 你應該會看到和以下相似的畫面

ionic platform add android works

Happy Coding