1.場景

現(xiàn)在我使用angular5開發(fā)了一個工程⊙馀迹現(xiàn)在業(yè)務(wù)需求躺酒，希望程序能夠以app的形式發(fā)布到市場上。為了方便就冀惭，直接將現(xiàn)有的程序使用cordova進(jìn)行封裝震叙。

2.最后的結(jié)果

屏幕快照 2018-03-13 下午6.23.48.png

3.具體操作

3.1 配置cordova的開發(fā)環(huán)境

我的操作系統(tǒng)版本是：mac os High Sierra 10.13.1
我安裝的androidstudio的版本是：android-studio-ide-171.4443003-mac.dmg

3.1.1 配置android的開發(fā)環(huán)境

首先安裝jdk。
然后在androidstudio里面安裝android的sdk散休。注意cordova支持的版本號媒楼。具體查看：
https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#requirements-and-support
最后在.bash_profile文件里面配置JAVA_HOME。最后效果是

屏幕快照 2018-03-14 上午9.04.14.png

3.1.2 創(chuàng)建一個cordova工程

首先安裝cordova

npm install -g cordova

然后創(chuàng)建一個工程：

cordova create hello com.example.hello HelloWorld

其中hello是工程文件夾的名字戚丸，com.example.hello是android需要的id划址，HelloWorld是應(yīng)用的名字。
進(jìn)入這個工程限府，添加需要平臺

cd hello
cordova platform add android
cordova platform ls

檢測環(huán)境是不是配置對了

cordova requirements

在檢測cordova需要的環(huán)境是不是安裝夺颤，之后出現(xiàn)這樣的提示。
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

屏幕快照 2018-03-06 上午9.42.32.png

這是因為在android studio2.3.1 gradle的位置變了胁勺，導(dǎo)致找不到了拂共。
這個時候需要手動安裝了。

brew update && brew install gradle

這樣android的環(huán)境就配置好了姻几。

3.2 將angular工程與cordova工程整合

3.2.1 通過拷貝和合并來整合兩個工程

將angular工程中所有的文件合并或者拷貝到cordova工程中宜狐。合并package.json文件的時候要小心，不要遺漏了什么蛇捌。
我的package.json文件太長了抚恒，就不往上傳了。借用一下別人的圖片络拌。

0_0ApgBv7ZEqpc5Uf-.png

3.2.2 合并中出現(xiàn)的問題

使用ng serve運(yùn)行一下工程俭驮，發(fā)現(xiàn)報錯：
Cannot read property 'config' of null TypeError: Cannot read property 'config' of null @angular/cli/tasks/serve.js @angular/cli/commands/serve.js
那是因為angular工程里面的一個隱藏文件.angular-cli沒有拷貝到cordova里面去〈好常拷過去之后混萝，再次運(yùn)行就好了。

3.2.3 修改合并的工程

在index.html文件里面添加
<script type=”text/javascript” src=”cordova.js”></script>
將index.html里面的base修改成：
<base href=".">
安裝插件
cordova plugin add cordova-plugin-device
將.angular-cli.json的outDir屬性改為“www”.
"outDir": "www"
打開android模擬器萍恕，運(yùn)行命令

ng build
cordova run android

就可以出現(xiàn)步驟二的結(jié)果了逸嘀。

4.遺留的問題

img的src所對應(yīng)的圖片沒有加載出來。那是因為cordova把img的src轉(zhuǎn)成：
file:///assets/img/check-box-unchecked.png 在android手機(jī)里面沒有找到這個圖片允粤，就報錯了崭倘。
file:///assets/img/check-box-unchecked.png Failed to load resource: net::ERR_FILE_NOT_FOUND
可以使用插件：cordova-plugin-file來解決問題

5.參考地址

https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
https://medium.com/@nacojohn/convert-your-angular-project-to-mobile-app-using-cordova-f0384a7711a6
https://github.com/henotia/Angular5-Cordova