Ionic各种问题解决汇总

安卓

1、如果在64位系统出现如下错误请安装64位jdk

Unable to start the daemon process.

2、如果在fat32格式的磁盘上面执行cnpm install会报错,必须在ntfs格式的磁盘上执行

3、如果出现如下错误:You have not accepted the license agreements of the following SDK components:

请安装sdk版本24,包括
SDK platform
Google Apis
Sources for android SDK

4、如果在jquery.ajax请求的时候报 Unrecognized token 'ename': was expecting ('true', 'false' or 'null')错误

就用JSON.stringify()函数转换一下
var data = {
"username" : username,
"password" : password
};
$.ajax({
type : 'post',
contentType:'application/json',
url : '/gateway/home/login',
data : JSON.stringify( data ),
dataType : 'json',
success : function(data, textStatus, jqXHR){

},
error: function (jqXHR, textStatus, errorThrown) {}
});

5、如果打包时候报类似于The RegExp to find the DeepLinkConfigToken did not return valid data 这种错误

执行:npm install @ionic/app-scripts@nightly --save-dev

6、如果运行时出现webpackJsonp is not defined,那么在index.html中还需要引入<script src="build/vendor.js"></script>

7、如果使用[style]=""这种方式动态加载样式时出现WARNING: sanitizing unsafe style value错误,安装如下方式解决:

8、如果OpenUrlModalController弹出的model左边的箭头点击不管用,很可能是url中包含中文而且没用encodeURI括起来

9、如果部分oppo手机闪退,加入以下权限控制试试

<uses-permission android:name="android.permission.BLUETOOTH" />

10、如果运行ionic cordova命令出现ionic integrations enable cordova并报错,在ionic.config.json中加入以下代码:

11、如果运行ionic cordova命令出现cordova integration is disabled in the default project,将上图中的false改为true

11、如果npm install的时候报connect ETIMEDOUT错误

执行:npm config set registry="http://registry.npmjs.org/"

12、如果打包时报“Some file crunching failed”错误,很可能是图片文件没生成完全或有损坏

13、如果npm install -g ionic的时候报错,试试以管理员身份运行cmd

14、如果安装完file-transfer插件打包时候报有关FileUtils的错误,那么请安装file插件4.3.3版本

15、如果在打包时卡在执行Downloading https://services.gradle.org/distributions/gradle-3.3-all.zip

这里以gradle-3.3-all.zip为例,那么下载gradle-3.3-all.zip,不要解压,然后放到C:\Users\hasee\.gradle\wrapper\dists\gradle-3.3-all\55gk2rcmfc6p2dg9u9ohc3hw9文件夹下就可以了

16、谨慎使用cordova platform update android@X.X

如果从低版本android升级到高版本时,最好删了重装,如果直接升级可能在打包时会出现莫名其妙的错误。

17、如果打包时报类似于unable to find attribute android:fontVariationSettings这种错误

在platforms/android/build.gradle文件中加入一下代码:

configurations.all {
    resolutionStrategy {
        force 'com.android.support:support-v4:27.1.0'
    }
}

18、如果打包时候报以下错误,请删除项目下的platforms文件夹,并执行ionic cordova platform add android@6.1.2

 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 

19、如果[innerHtml]后样式丢失,那么需要加一个管道类,然后[innerHtml]="aaaa|safehtml"

20、如果页面状态栏如下图一样看不清,那么执行:ionic cordova plugin rm cordova-plugin-statusbar或换成2.2.1版本

21、如果在打包时候报如下错误:

那么在platform / android下的build.gradle中添加下一个代码片段:

configurations.all {
    resolutionStrategy {
        force 'com.android.support:support-v4:27.1.0'
    }
}

22、如果要去掉push页面的返回按钮,需要在要操作的页面中的ionViewWillEnter方法中调用

this.viewCtrl.showBackButton(false);
 
并在构造函数中加入viewCtrl: ViewController参数

23、如果要在ion-select组件的“确定”按钮点击后执行事件,需要在ion-select加入(ngModelChange)="xxx()",xxx为方法名,例如:

 

<ion-select okText="确定" cancelText="取消" [(ngModel)]="item.result" (ngModelChange)="saveCompany(item)">
    <ion-option [value]="sta" *ngFor="let sta of tzstatus">{{sta}}</ion-option>
</ion-select>

24、激光推送插件升级后问题,参考以下链接

如何在 Cordova Android 7.0.0 以下版本集成最新插件 极光插件为例 - 简书

前提

Cordova Android 7.0.0开始改变了项目安卓平台的架构。新建一个空项目分别添加Android 6.4.0 和 Android 7.0.0平台:

cordova platform add android@6.4.0
cordova platform add android@7.0.0

生成的安卓平台结构分别为:

image.png

可以看到Cordova从7.0.0项目结构开始和原生Android项目保持一致:

  • 将AndroidManifest.xml,assets,res,libs资源目录整合到src目录下
  • 将src放入一个app模块,app模块由单独的gradle文件配置

导致的问题

因为项目结构的改变,很多插件也开始修改集成方式以支持7.0.0的使用,并在此基础上进行插件更新操作。
而很多针对低版本开发的项目比如Cordova-Android 6.4.0,如果无法直接升级项目版本,只能选择集成老版本的插件,得不到最新支持。

解决办法

我们已经知道了7.0.0开始结构的主要变化,而低版本和高版本的插件集成无非就是拷贝文件的路径不同罢了,核心代码使用都是同一套。
所以低版本项目想要集成只支持7.0.0的新版插件,只要导入插件后,将插件对应文件还原到低版本对应路径便可。

举例

示例插件

这里以jpush-phonegap-plugin为例,这是极光推送官方支持的PhoneGap/Cordova 插件,插件从 v3.4.0 开始支持 cordova-android 7.0.0。

集成

我们要在低版本的项目集成此插件该怎么做:

  1. 老版本插件符合要求,直接集成v3.4.0以下的插件版本。
  2. 需要集成最新的功能,集成最新版本,自己手动配置。

第一种就不说了,我们直接进行第二种方式集成:

  • 以我们最开始Cordova-Android 6.4.0的空项目为例,并使用官方sample作为测试依据
  • 通过 Cordova Plugins 安装
 cordova plugin add jpush-phonegap-plugin --variable APP_KEY=your_jpush_appkey

image.png

  • 导入最新插件后我们再看项目结构,多出了两个目录,这就是新插件

     

    image.png

  • 这时如果我们直接跑sample,无法获取到registrationID,而且原生log中抛出ClassNotFoundException错误,无法成功集成推送

     

    image.png

  • 接下来我们还原插件文件对应低版本路径:

    • 将android/app/src/main/java下的cn.jiguang.*拷贝到android/src/目录下
    • 将android/jniLibs下的所有文件拷贝到android/libs/目录下
    • 删除android/app和android/jniLibs目录

      image.png

  • 再次编译运行成功获取registrationID,并且能够成功接收推送,完美。

     

    image.png

  • 此例适用所有极光cordova插件,比如jmessage-phonegap-plugin,cordova-plugin-janalytics

总结

  • Cordova Android 7.0.0结构调整主要体现在资源文件和src目录,目录结构开始贴近原生。
  • Cordova Android 7.0.0以下版本集成最新插件只需将插件对应文件还原到低版本对应路径便可。
  • 同理,如果项目是7.0.0往上的,而插件还没针对7.0.0进行升级,又需要在项目中使用插件怎么办?是否可以根据这篇文章反其道行之呢?留给读者去验证

补充

为何文中JniLibs文件要拷贝到libs下呢?

  • 因为Cordova Android 7.0.0以下的版本在根目录build.gradle中配置了JniLibs引用路径为libs。

     

    image.png

以上,谢谢。

25、如果要触发ion-searchbar组件弹出键盘的搜索按钮事件,需要如下写法:

<ion-searchbar (keyup.enter)="searchCompany()"></ion-searchbar>

26、立即重新渲染页面的方法:

27、解决ionic3 无法访问https请求的问题

  • android 端

找到CordovaWebViewClient.java文件,目录位置:

project/platforms/android/CordovaLib/src/org/apache/cordova/CordovaWebViewClient.java

修改onReceivedSslError方法,修改如下

文件所处位置

cordova v4及以下

project/platforms/android/CordovaLib/src/org/apache/cordova/CordovaWebViewClient.java

cordova v5

project/platforms/android/CordovaLib/src/org/apache/cordova/engine/SystemWebViewClient.java

ios 端

将AppDelegate.m文件下修改为:

文件所在位置:

project/platforms/ios/Project/Classes/AppDelegate.m

28、解决非button控件点击事件延迟问题

不要用(click),改用(touchstart)

例如:

<ion-input [(ngModel)]="signup.xiaoquName" name="xiaoqu" #xiaoqu="ngModel" required readonly (touchstart)="goXiaoqu()">
</ion-input>

29、提交的参数如果“+”变为了空格,需要使用encodeURIComponent()将参数括起来,例如:

this.apiService.login('/j_ajax_security_check',
 {
      j_username: this.login.username,
  j_password: encodeURIComponent(this.login.password),
 }
)

30、如果在安装android的时候遇到Probably this is either a connection problem, or platform spec is incorrect错误

解决办法:将https-proxy=null,proxy=null两个变量设置为null即可解决。这两个变量在.npmrc文件里。可以用everything搜索npmrc文件,然后打开设置以上两个变量为null。或者在控制台直接输入命令npm config set proxy null和npm config set https-proxy null。

31、如果在安装插件时出现Cannot find module 'UNMET\package.json'错误

解决办法:多试几次

32、如果打包时出现No resource identifier found for attribute错误

解决办法:安装如下插件

cordova plugin add cordova-android-support-gradle-release --variable ANDROID_SUPPORT_VERSION=27.+

 33、如果高版本Android打包后,在真机上访问不了网络,下图的alert只打出{},找不到错误所在,解决办法:

(1)APP改用https请求
(2)targetSdkVersion 降到27以下
(3)更改网络安全配置

34、ionic4以上如果弹出页面出现Can't bind to 'ngIf' since it isn't a known property of之类的错误

ionic4及以上,如果在使用ModalController弹出页面时,出现Can't bind to 'ngIf' since it isn't a known property of之类的错误,需在app-routing.module.ts文件中加上路由声明,如下所示:

35、如果出现真机跨域问题,在response中需要加如下头部:

36、unsafe value used in a resource URL context

注意:需要把DomSanitizer设置为private,否则真机报错

37、error: resource mipmap/icon (aka io.ionic.starter:mipmap/icon) not found

打包时出现此问题往往是插件Background Geolocation导致的,解决办法如下:

在config.xml中加入以下代码:

38、Could not resolve com.android.support:appcompat-v7:26+.

打包时出现这个错误,解决办法如下:

 build.gradle 添加如下:

allprojects {

    repositories {

        jcenter()

        google()

        maven { url'http://maven.aliyun.com/nexus/content/groups/public/'}  

        maven { url'https://maven.aliyun.com/repository/google'}

 }

}

39、Could not resolve com.android.support:support-annotations:27.+. FAILED

打包时出现这个错误,解决办法如下:

在项目的build.gradle里面最外层添加

configurations.all {  
    resolutionStrategy.force 'com.android.support:support-annotations:23.1.0'  
} 

40、angular9真机跨域问题最终说明

后台加以下代码:

41、打包时候报:Connect to maven.google.com:443,按照如下修改build.gradle

42、打包后访问网络时候报“something bad happened;please try agin later”,在gradle.properties文件中加入如下属性

43、css里如果有图片路径,需要这样写:

44、如果编译时报Unrecognised input. Possibly missing opening '{'

尝试将<style>标签中的lang="less"去掉

45、如果.ttf字体打包后不起作用,检查一下是不是放在了assets/fonts文件夹下,如果是,换一个地方即可 

苹果

1、ios打包报错

duplicate symbols for architecture armv7 cdvlogger.o
ionic cordova platform remove ios
ionic cordova platform add ios@4.4.0

2、ionic3编译出错

升级angular 4.4.1以上版本 参考哈密
升级ionic typescript 2.2.1 以上版本

ERROR Error: StaticInjectorError[Http]:
improt HttpModule

还要注意引入包的路径 一定不能引入错误了
例如:public_api 这个就是因为引入browsermodule时路径错误

3、5.0打包

5.0打包时需要加入 --prod --aot
npm install -g @angular/cli@latest
安装最新的cli 适应angular 5

4、mac 安装npm 安装cordova 安装pods 错误修复

sudo npm cache clear --force
sudo npm install -g npm@latest 更新最新的node
sudo npm install -g cordova 安装最新版cordova

升级os需要重新安装cocoapods
sudo gem install cocoapods
npm install -g ionic@2.2.3
遇到npm ionic增加平台错误
遇到什么就加什么
Error: Cannot find module 'config-chain'
npm install -g config-chain

npm install localforage

index.html中增加
<!-- all code from node_modules directory is here -->
<script src="build/vendor.js"></script>
错误修复
引入头文件 通过pch文件 添加头文件引用
__weak __typeof(self) weakSelf = self; typeof错误修复

5、微信登录

微信登录 修改ionicdeeplinkplugin
加入 39行
if (![[url scheme] isEqualToString:@"https"] || ![[url scheme] isEqualToString:@"http"]) {
NSLog(@"IonicDeepLinkPlugin: Scheme not for deeplink: %@", [url scheme]);

return NO;
}

6、热更新

cnpm install -g cordova-hot-code-push-cli

ionic plugin add https://github.com/apache/cordova-plugin-compat.git
ionic plugin add https://github.com/apache/cordova-plugin-file.git
ionic plugin add https://github.com/apache/cordova-plugin-file-transfer.git

ionic plugin add https://github.com/nordnet/cordova-hot-code-push.git
ionic plugin add https://github.com/nordnet/cordova-hot-code-push-local-dev-addon.git

安装
cnpm install simple-plist

config.xml加入如下内容
<chcp>
<native-interface version="1"/>
<config-file url="http://192.168.1.72:8080/dev/chcp.json"/>
</chcp>
安装完成
执行
cordova-hcp init 输入名字 更新方式 url

需要更新时
执行inoic serve 生成最新www文件,执行 cordova-hcp build 在www下生成最新文件

复制内容到服务器 dev目录下

7、ios跨域访问

在config.xml中加入下面标签

<allow-navigation href="*"/>

8、如果弹出键盘后顶部上移,安装键盘插件后在项目开始加入以下代码:

this.keyboard.disableScroll(true);

9、ios11状态栏问题

Please install three Cordova plugins:
1、cordova-plugin-disable-ios11-statusbar
2、cordova-plugin-statusbar
3、cordova-plugin-wkwebview-engine

set property:
viewport-fit=cover

10、如果打包时候报CDVLogger.o相关的错误

在config.xml和package.json中分别删除cordova-plugin-console

11、ios的iframe页面嵌入之后,手指点击input框,自动弹出键盘后,输入几个文字,然后手指再点击一下input框之后,再在键盘里敲字母,就无法在input框显示所敲入的内容了

需要在页面初始化时候加上如下语句

 var el = $('#input的id');
el.on('keydown', function() {
  window.focus()
  el.focus()
});

12、如果打包时遇到The Angular AoT build failed.错误,先将安卓环境下的node_modules文件夹拷贝过来,然后执行npm rebuild node-sass --force语句,然后再打包一般可以成功

12、更改Ionic在ios中键盘上方done为完成

在xcode中打开项目

修改xcode中项目info---->Localization native development region中的English为China

13、如果打包时报'The platform "ios" does not appear to be a valid ' +
  'cordova platform. It is missing API.js. ios not ' +
  'supported.')

ionic cordova platform rm ios

ionic cordova platform add ios

14、ionic3打包如果报Cannot read property ‘toLowerCase’ of undefined

报错位置://platforms/ios/cordova/lib/list-emulator-build-targets 第54行的device.availability.toLowerCase()
修改:

if (device.name === deviceType.name.replace(/\-inch/g, ' inch') &&
    device.availability.toLowerCase().indexOf('unavailable') < 0) {
    availAcc.push(device);
 }
改为:

if (device.name === deviceType.name || device.name === deviceType.name.replace(/\-inch/g, ' inch')) {
     // Check new flag isAvailable (XCode 10.1+) or legacy string availability (XCode 10 and lower)
     if (device.isAvailable || (device.availability && device.availability.toLowerCase().indexOf('unavailable') < 0)) {
          availAcc.push(device);
      }
  } 

15、打包时候报Promise rejected with non-error: xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

说明是没指定xcode路径,需要执行:sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

西山水壶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值