angular使用cordova混合开发

Posted 2023-02-20

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

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

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

首先安装cordova

然后创建一个工程：

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

检测环境是不是配置对了

在检测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

这是因为在android studio2.3.1 gradle的位置变了，导致找不到了。
这个时候需要手动安装了。

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

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

使用 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里面去。拷过去之后，再次运行就好了。

在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模拟器，运行命令

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

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 来解决问题

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