Tag Archives: ionic troubleshooting

Ionic Uncaught ReferenceError: $rootScope is not defined

今天在ionic application 上需要使用到 $rootScope
當我執行這個app時出現了以下的錯誤信息

Uncaught ReferenceError: $rootScope is not defined
解決方法十分簡單
我們只需要在 function上加上 $rootScope 這個dependency 便可以了

E.G.

.run(function ($ionicPlatform, <strong> $rootScope</strong>) {
    $rootScope.$on("", function(){});
  
  }

Hope you find it useful

Ionic Error: EXDEV, cross-device link not permitted

今天當我嘗試在我的 Ionic Framework Project 安裝 cordova plugin 時出現了以下的錯誤信息..

<code class="language-text" data-lang="text"><a href="https://github.com/phonegap-build/PushPlugin.git" target="_blank">cordova plugin add https://github.com/phonegap-build/PushPlugin.git</a></code>

Error: EXDEV, cross-device link not permitted
Ionic Error: EXDEV, cross-device link not permitted
做了一會research 之後發現..
應該是 電腦上安裝了的 Corodova 版本有問題..
所以只需要 安裝舊一些的版本便可以解決這個問題

解決方法
command prompt 上執行以下指令去安裝 指定版本的 cordova

npm install -g cordova@5.0.0

npm install -g cordova@ version
安裝完了再次嘗試安裝 這個cordova plugin..
e.g. Ionic / Cordova Push Notification plugin

cordova plugin add https://github.com/phonegap-build/PushPlugin.git

Able to install Cordova plugin

成功安裝

Hope you find it useful

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

在準備發佈我的Ionic Android 程式到 Google Play Store 前 需要使用 zipalign 來把這個 APK 優化。。。
可惜當我使用 zipalign 指令時。。
出現了以下的錯誤信息
“‘zipalign’ is not recognized as an internal or external command, operable program or batch file
'zipalign' is not recognized as an internal or external command, operable program or batch file

很多時候遇到 “‘xxx’ is not recognized as an internal or external command, operable program or batch file” 都是因為 “Environment Variable” 沒有設定好

我在想..像adb 這些 Android SDKtools都可以用到..
所以應該不是 “Environment Variable” 的 Path的問題

做了一會research之後發現

原來zipalign.exe.不是儲存在我們android SDK tool 這個資料夾內。。

<span style="color: #008000;"><strong>"C:\Users\[Username]\AppData\Local\Android\sdk\tools"
</strong></span>

Android SDK Tools Folder
而是在。。

<span style="color: #008000;"><strong>"C:\Users\[Username]\AppData\Local\Android\sdk\build-tools\[Build version]"
</strong></span>

Android SDK Build Tools
解決方法
。。
zipalign 從 “build-tools“的資料夾內
複製到 “tools” 的資料夾內

之後便可以成功使用 zipalign 指令了
ZipAlign tools work

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

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.