Angular/Ionic安裝配置彙總

1、NodeJS

Angular和Cordova/Ionic都使用cli工具開發，所以必須先安裝最新版本的NodeJS。NodeJS裏面包含npm包管理器，而Angular/Ionic自己和程序依賴的庫和框架都是npm包，要進行Angular/Ionic開發首先須要安裝npm包管理器。

NodeJS的官網下載頁：https://nodejs.org/en/download/

安裝NodeJS的時候把npm一塊兒安裝就能夠。

也能夠安裝yarn，下載依賴包的速度和穩定性會提高不少。能夠參考 https://yarn.bootcss.com/

2、使用npm的淘寶鏡像

直接下載npm庫會很慢，不少時候會不成功。國內用戶能夠使用淘寶的npmjs.org鏡像，加快下載速度。

淘寶鏡像的官方使用說明在：https://npm.taobao.org/

官方的建議是安裝cnpm代替npm，或者添加一個叫cnpm的別名。另外一個方法是不使用cnpm，而是修改npm的默認鏡像：

npm config set registry http://registry.npm.taobao.org/

若是想修改回默認的版本，能夠這樣：

npm config set registry https://registry.npmjs.org/

用 npm get registry 能夠查看如今使用的是哪一個鏡像。

若是安裝了yarn，能夠這樣設置鏡像：

yarn config set registry http://registry.npm.taobao.org/

3、Angular安裝

npm install -g @angular/cli

可參考官網：https://angular.cn/guide/quic...

cli命令能夠參考：https://angular.cn/cli

4、Ionic4安裝

安裝cli: npm install -g ionic

Ionic cli的文檔：https://ionicframework.com/do...

Ionic Native提供使用Angular風格調用原生組件的方法。

Ionic native的文檔：https://ionicframework.com/do...

5、Ionic3安裝

1.安裝Ionic和Cordova的CLI

npm install -g ionic cordova

npm能夠先安裝或者配置淘寶鏡像。

2.新建項目

在命令行中，進入項目目錄的上級目錄，而後執行 如下命令：

ionic start TestIonic tabs

其中，TestIonic是項目名，也是目錄名，命令執行成功後，會自動在當前目錄下建立一個名叫TestIonic的子目錄，就是新建項目的目錄。

後面的tabs表示新建項目的模板，tabs模板3個tab的佈局，也能夠使用其餘官方模板：

tabs : a simple 3 tab layout

sidemenu: a layout with a swipable menu on the side

blank: a bare starter with a single page

super: starter project with over 14 ready to use page designs

tutorial: a guided starter project

此命令可能會出現網絡鏈接錯誤：

[ERROR] Network connectivity error occurred, are you offline?

If you are behind a firewall and need to configure proxy settings, see: https://ionicframework.com/docs/cli/configuring.html#using-a-proxy

解決方案，執行如下命令配置npm代理：

npm config set proxy= https://registry.npm.taobao.org
npm config set https_proxy=https://registry.npm.taobao.org

而後設置ionic的代理：

npm install -g @ionic/cli-plugin-proxy

添加環境變量 IONIC_HTTP_PROXY 值爲代理服務器地址，好比

https://registry.npm.taobao.org

3.運行項目

ionic serve

複製地址到谷歌瀏覽器，而後按下F12，按左上角第二個按鈕切換到手機模式，能夠調試項目。

4.打包

打包android app，須要先安裝gradle（網上說法如此，但實際編譯過程當中沒有看到ionic使用了安裝的gradle，反而本身下載了一個gradle）和android sdk，可參考https://blog.csdn.net/qq_2026...。

ionic cordova build android --release --prod

上面命令能夠打包成爲android apk，而且在輸出提示中顯示apk文件的位置。

ionic cordova run android

上面命令生成apk文件而且直接安裝到安卓手機上，但安卓手機必須用usb鏈接PC，並且進入開發者模式，啓用usb調試，而且安裝的時候通常須要在手機上作確認，不然安裝失敗。

ionic cordova emulate android

上面命令生成apk文件而且安裝到安卓模擬器上運行，最好先啓動安卓模擬器，若是沒有啓動安卓模擬器，ionic會自動啓動缺省的安卓模擬器。

另外，上面兩個命令也能夠用cordova版本例如：

cordova run android

cordova emulate android

效率更高，不過事先必須先調用過ionic cordova build。

另外，以上ionic命令均可以加上選項-lc：

ionic cordova emulate android -lc

選項-lc有兩個做用，一個是把console.info等輸出信息輸出到命令行上；另外一個是能夠使配置文件ionic.config.json中的proxies生效。

注意，-lc選項雖然可讓proxies生效，但只能用於調試，正式安裝運行是無效的，須要用環境變量來控制。

5.android簽名

運行

ionic cordova build android --release --prod

以後，在命令行輸入如下命令：

keytool -genkey -v -keystore testionic.keystore -alias testionic.keystore -keyalg RSA -validity 36500

jarsigner -verbose -keystore testionic.keystore -signedjar tionic.apk app-release-unsigned.apk testionic.keystore

zipalign -v 4 txx.apk txx_aligned.apk

其中keytool和jarsigner是jdk的工具，須要配置jdk的path。zipalign是android sdk的工具，須要在android sdk下搜索其具體路徑，但這個命令不必定須要執行，只是優化。

也能夠直接在cordova build中直接簽名

ionic cordova build android --release --prod -- -- --minSdkVersion=22 --keystore=testionic.keystore --alias=testionic.keystore --storePassword=123456 --password=123456