【移动端一】angular+ionic3+SQLite零基础搭建demo及打包apk

官网链接：angular typescript ionic3
Ionic项目

1. 创建项目： ionic start Demo blank --type=ionic-angular (如果要创建旧版本ionic的项目：参考路径http://www.ionic.wang/article-index-id-139.html
2. 删除node_modules，然后npm install
   如果出现报错网络连接失败，则设置淘宝镜像地址：

   npm config set registry https://registry.npm.taobao.org
   npm config set disturl https://npm.taobao.org/dist
   

   yarn config set registry https://registry.npm.taobao.org
   yarn config set disturl https://npm.taobao.org/dist
   

3. ionic serve (如出现node版本对应问题，请参照对应版本修改，可使用nvm install 版本，nvm use 版本。重新下载cordova和ionic. 然后ionic serve启动
   使用VSCode时，执行命令出错： 解决办法，让VSCode里从powershell变为cmd,参考链接 外部访问本地浏览器：ionic serve --external
4. 配合cordova使用

1. 添加（移除）Android/IOS平台
   ionic cordova platform add android/ios
   ionic cordova platform rm android/ios
2. 添加（移除）插件
   ionic cordova plugin add ……
   ionic cordova plugin rm ……
   查看插件列表 cordova plugin ls
3. 打包
   ionic cordova build android/ios --release(不输入release默认是debug包)
   ionic cordova build android/ios --prod(–prod指打压缩包，此命令为打debug压缩包)
   附加：通过ADB命令实现App的安装、卸载、覆盖 ，我在覆盖安装的的时候发现了我覆盖安装的包签名不同，所以不能覆盖安装,报错信息很nice.

cordova-android@9.1.0的9.1.0是Android版本。Android target后边android-29是指Android SDK版本，注意版本匹配。

4. 其他命令可以执行ionic cordova –help参看

6. 新建页面 ionic g page 页面名称(新建不带.module.js文件的命令： ionic g page 页面名称 --no-module）
7. ionic 6 实现SQLite增删改查功能,官方链接
   [1] ionic cordova plugin add cordova-sqlite-storage
   [2] npm install @awesome-cordova-plugins/sqlite
   [3] 然后ionic serve，在这里我出现了问题

typescript:
…/Demo/node_modules/@awesome-cordova-plugins/sqlite/ngx/index.d.ts,
line: 1 Cannot find module ‘@awesome-cordova-plugins/core’. import {
AwesomeCordovaNativePlugin } from ‘@awesome-cordova-plugins/core’

然后运行npm install @awesome-cordova-plugins/core然后报错

typescript:
…workspace/Demo/node_modules/@awesome-cordova-plugins/core/decorators/common.d.ts,
line: 18 Cannot find name ‘unknown’. L18: ction
wrapPromise(pluginObj: any, methodName: string, args: any[], opts?:
CordovaOptions): Promise;

然后找到对应位置 把unknown改掉成any,然后运行ionic serve 这个时候浏览器控制台输出.then undefined（参考链接：https://stackoverflow.com/questions/54857845/ionic-4-sqlite-cannot-read-property-then-of-undefined-error）, 然后运行ionic cordova run browser -l提示npm i -g native-run，然后按照要求npm i -g native-run，然后运行ionic cordova run browser -l成功创建数据库+表

7. SQLite增删改查操作参考文章，亲试nice
8. 在系统内存里查看自己的数据库信息
9. sqlite3 命令行查看数据内容

Angular ionic项目生命周期
constructor，ionViewCanEnter，[ngDoCheck，ngAfterContentInit，ngAfterContentChecked，]ngAfterViewInit，[ngAfterViewChecked]，ionViewDidLoad，[ngDoCheck，ngAfterContentChecked，[ngAfterViewChecked]，]ionViewWillEnter，ionViewDidEnter,ionViewWillLeave,ionViewDidLeave,ionViewWillUnload,ngOnDestroy

注意问题及解决办法：
[1]. 误操作导致：Cannot load Cordova config 问题
解决办法： ionic integrations enable cordova --add
[2]. ionic打包报错Execution failed for task ‘:compileDebugJavaWithJavac’
解决方案：
ionic cordova platform remove android （卸载）
ionic cordova platform add android@6.3.0 （安装）
[3]. cordova-plugin-telerik-imagepicker 插件无法安装。

Error: cordova-plugin-telerik-imagepicker cannot be added. <edit-config> changes in this plugin conflicts with <edit-config> changes in config.xml. Conflicts must be resolved before plugin can be added

解决方案：安装低版本的
ionic cordova plugin remove cordova-plugin-telerik-imagepicker（卸载）
ionic cordova plugin add cordova-plugin-telerik-imagepicker@2.3.3。（安装）
[4]. ionic cordova打包报错FileTransfer.java:49: 错误: 程序包org.apache.cordova.file不存在

.warning: string 'discard' has no default translation.
warning: string 'done' has no default translation.  Execution failed for task ':compileDebugJavaWithJavac'.
error: package org.apache.cordova.file does not exist

解决方案 ：
cordova plugin remove cordova-plugin-file-transfer（卸载）
cordova plugin add cordova-plugin-file-transfer@1.6.3（安装）
安装完成重新build成功

（@呵粑粑牛 提供的遇到的异常及解决方案）ionic cordova打包报错FileTransfer.java:49: 错误: 程序包org.apache.cordova.file不存在
解决方案：
cordova plugin remove cordova-plugin-file-transfer --force //卸载
cordova plugin add cordova-plugin-file-transfer@1.6.3 --force //安装

[5] ImagePicker浏览器报错cordova is not available，打包以后模拟器运行以后连接Android Studio报错Not allowed to load local resource
新的插件：cordova-plugin-ionic-webview @ 2.x似乎不稳定
解决方案 ：
uninstall webview: ionic cordova plugins rm cordova-plugin-ionic-webview
install old version: ionic cordova plugins add cordova-plugin-ionic-webview@1.2.1
clean cordova cache: cordova clean android

[6] （android@9.0平台下的）Task :app:processDebugManifest FAILED错误，然后仔细看下边如果有
Element uses-feature#android.hardware.location.gps at AndroidManifest.xml:49:5-90 duplicated with element declared at AndroidManifest.xml:44:5-66元素重复错误
删除AndroidManifest.xml文件的 <uses-feature android:name="android.hardware.location.gps" />

[7] ionic打包的时候报错Build-tool 34.0.0 is missing DX at xxx\Android\Sdk\build-tools\34.0.0\dx.bat，　Installed Build Tools revision 34.0.0 is corrupted
解决方案链接