Category Archives: Ionic Framework

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

嘗試跟著Ionic FrameworkOfficial Document
http://ionicframework.com/docs/guide/publishing.html
Keytool instructions from Ionic Publishing page

使用 keytoolsign我的 Ionic Android APK時出現以下的錯誤信息

‘keytool’ is not recognized as an internal or external command, operable program or batch file
'keytool' is not recognized as an internal or external command, operable program or batch file

應該是Environment Variable上的 Path 有些問題而造成的

解決方法

在電腦上找出安裝在電腦上的 Java Bin 資料夾
Java Bin Folder Path

E.G.
C:\[Program Files 或 Program Files (x86)]\Java\[jdk version]\bin
我的bin folder是在這裡的
C:\Program Files\Java\jdk1.8.0_25\bin

之後加進 電腦的 Environment Variable的 “path” 屬性上
Environment Variable - Path property

之後重新啟動 command prompt便可以了
Keytool command works

Hope you find it useful



How to list added cordova plugin on ionic – 如何找出在ionic framework上找出 已經安裝的 cordova 插件

終於可以發佈我第一個使用 Ionic Framework來寫的Hybrid App
official document上建議先移除沒有用的 cordova 的 Plugin 再發佈
那麼如何知道現有的Ionic Project上已經安裝的cordova Plugin 呢?

解決方法十分簡單

我們可以在Projectroot directory上使用以下的指令便可以列出 已安裝的 cordova plugins

cordova plugin list

List Cordova Plugins - cordova plugin list
Hope you find it useful



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