angular使用cordova混合开发

1.场景

现在我使用angular5开发了一个工程。现在业务需求，希望程序能够以app的形式发布到市场上。为了方便就，直接将现有的程序使用cordova进行封装。

2.最后的结果

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

3.具体操作

3.1 配置cordova的开发环境

我的操作系统版本是：mac os High Sierra 10.13.1
我安装的androidstudio的版本是：android-studio-ide-171.4443003-mac.dmg

3.1.1 配置android的开发环境

首先安装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 创建一个cordova工程

首先安装cordova

npm install -g cordova

然后创建一个工程：

cordova create hello com.example.hello HelloWorld

其中hello是工程文件夹的名字，com.example.hello是android需要的id，HelloWorld是应用的名字。
进入这个工程，添加需要平台

cd hello
cordova platform add android
cordova platform ls

检测环境是不是配置对了

cordova requirements

在检测cordova需要的环境是不是安装，之后出现这样的提示。
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的位置变了，导致找不到了。
这个时候需要手动安装了。

brew update && brew install gradle

这样android的环境就配置好了。

3.2 将angular工程与cordova工程整合

3.2.1 通过拷贝和合并来整合两个工程

将angular工程中所有的文件合并或者拷贝到cordova工程中。合并package.json文件的时候要小心，不要遗漏了什么。
我的package.json文件太长了，就不往上传了。借用一下别人的图片。

0_0ApgBv7ZEqpc5Uf-.png

3.2.2 合并中出现的问题

使用ng serve运行一下工程，发现报错：
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里面去。拷过去之后，再次运行就好了。

3.2.3 修改合并的工程

在index.html文件里面添加

将index.html里面的base修改成：

安装插件
cordova plugin add cordova-plugin-device
将.angular-cli.json的outDir属性改为“www”.
"outDir": "www"
打开android模拟器，运行命令

ng build
cordova run android

就可以出现步骤二的结果了。

4.遗留的问题

img的src所对应的图片没有加载出来。那是因为cordova把img的src转成：
file:///assets/img/check-box-unchecked.png 在android手机里面没有找到这个图片，就报错了。
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