Some ionic functions do not work on some devices

[Nexeuz]

Ionic version: (check one with "x") [ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ x] 3.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: All caracteristic in motorola moto G TX1040 works fine, but in other device Motorola TX1032, some sass styles don't works, audio record, and play audio recorded don't work. :(

Expected behavior:

I would hope that the option to record and listen to audio works perfectly, and the styles do not move so much, taking into account that the devices have the same resolutions of screens (I will add pictures below and error code)

Steps to reproduce:

1. I ran ionic cordova run android in motorola TX1032
2. I ran ionic cordova run android in mororola TX1040
3. the behavior works fine in TX1032
4. Some features don't work correctly in TX1040

Related code:

Output for TX1040 when runs ionic cordova run android

ionic cordova run android

Running app-scripts build: --address 0.0.0.0 --port 8100 --p 8100 --livereload-port 35729 --r 35729 --iscordovaserve --externalIpRequired --nobrowser

[23:10:01]  build dev started ...
[23:10:01]  clean started ...
[23:10:01]  clean finished in 62 ms
[23:10:01]  copy started ...
[23:10:01]  transpile started ...
[23:10:16]  transpile finished in 14.94 s
[23:10:16]  preprocess started ...
[23:10:16]  preprocess finished in less than 1 ms
[23:10:16]  webpack started ...
[23:10:19]  copy finished in 17.56 s
[23:10:37]  webpack finished in 20.55 s
[23:10:37]  sass started ...
[23:10:49]  sass finished in 11.87 s
[23:10:49]  postprocess started ...
[23:10:49]  postprocess finished in less than 1 ms
[23:10:49]  lint started ...
[23:10:49]  build dev finished in 47.65 s
> cordova run android
[23:11:06]  lint finished in 17.17 s
ANDROID_HOME=C:\Users\wwwni\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\java\jdk1.8.0_131
Subproject Path: CordovaLib
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.
        at build_53o2yca4267baefhwe92ripa7.run(C:\Users\wwwni\Desktop\PappCorn\appviation\platforms\android\build.gradle:137)
The JavaCompile.setDependencyCacheDir() method has been deprecated and is scheduled to be removed in Gradle 4.0.
Incremental java compilation is an incubating feature.
The TaskInputs.source(Object) method has been deprecated and is scheduled to be removed in Gradle 4.0. Please use TaskInputs.file(Object).skipWhenEmpty() instead.
:preBuild UP-TO-DATE
:preDebugBuild UP-TO-DATE
:checkDebugManifest
:preReleaseBuild UP-TO-DATE
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl
 UP-TO-DATE
:CordovaLib:compileDebugNdk
 UP-TO-DATE
:CordovaLib:compileLint
 UP-TO-DATE
:CordovaLib:copyDebugLint
 UP-TO-DATE
:CordovaLib:mergeDebugShaders
 UP-TO-DATE
:CordovaLib:compileDebugShaders

UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets

UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles
UP-TO-DATE
:CordovaLib:packageDebugRenderscript
 UP-TO-DATE
:CordovaLib:compileDebugRenderscript
 UP-TO-DATE
:CordovaLib:generateDebugResValues
 UP-TO-DATE
:CordovaLib:generateDebugResources
 UP-TO-DATE
:CordovaLib:packageDebugResources
 UP-TO-DATE
:CordovaLib:processDebugManifest
 UP-TO-DATE
:CordovaLib:generateDebugBuildConfig

UP-TO-DATE
:CordovaLib:processDebugResources
 UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:incrementalDebugJavaCompilationSafeguard
 UP-TO-DATE
:CordovaLib:compileDebugJavaWithJavac
 UP-TO-DATE
:CordovaLib:processDebugJavaRes
 UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForDebug
 UP-TO-DATE
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug
 UP-TO-DATE
:CordovaLib:mergeDebugJniLibFolders
 UP-TO-DATE
:CordovaLib:transformNative_libsWithMergeJniLibsForDebug UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForDebug
 UP-TO-DATE
:CordovaLib:bundleDebug
 UP-TO-DATE
:CordovaLib:preReleaseBuild UP-TO-DATE
:CordovaLib:checkReleaseManifest
:CordovaLib:prepareReleaseDependencies
:CordovaLib:compileReleaseAidl
 UP-TO-DATE
:CordovaLib:compileReleaseNdk
 UP-TO-DATE
:CordovaLib:copyReleaseLint
 UP-TO-DATE
:CordovaLib:mergeReleaseShaders UP-TO-DATE
:CordovaLib:compileReleaseShaders
 UP-TO-DATE
:CordovaLib:generateReleaseAssets UP-TO-DATE
:CordovaLib:mergeReleaseAssets
 UP-TO-DATE
:CordovaLib:mergeReleaseProguardFiles
 UP-TO-DATE
:CordovaLib:packageReleaseRenderscript
 UP-TO-DATE
:CordovaLib:compileReleaseRenderscript
 UP-TO-DATE
:CordovaLib:generateReleaseResValues
 UP-TO-DATE
:CordovaLib:generateReleaseResources UP-TO-DATE
:CordovaLib:packageReleaseResources
 UP-TO-DATE
:CordovaLib:processReleaseManifest
 UP-TO-DATE
:CordovaLib:generateReleaseBuildConfig
 UP-TO-DATE
:CordovaLib:processReleaseResources
 UP-TO-DATE
:CordovaLib:generateReleaseSources UP-TO-DATE
:CordovaLib:incrementalReleaseJavaCompilationSafeguard
 UP-TO-DATE
:CordovaLib:compileReleaseJavaWithJavac
 UP-TO-DATE
:CordovaLib:processReleaseJavaRes
 UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForRelease UP-TO-DATE
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForRelease UP-TO-DATE
:CordovaLib:mergeReleaseJniLibFolders UP-TO-DATE
:CordovaLib:transformNative_libsWithMergeJniLibsForRelease
 UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForRelease UP-TO-DATE
:CordovaLib:bundleRelease
 UP-TO-DATE
:prepareComAndroidSupportCardviewV72340Library
 UP-TO-DATE
:prepareComAndroidSupportCustomtabs2340Library
 UP-TO-DATE
:prepareComAndroidSupportSupportV42411Library
 UP-TO-DATE
:prepareComFacebookAndroidFacebookAndroidSdk4141Library
 UP-TO-DATE
:prepareOrgApacheCordovaCordovaLib623DebugLibrary
 UP-TO-DATE
:prepareDebugDependencies
:compileDebugAidl
 UP-TO-DATE
:compileDebugRenderscript
 UP-TO-DATE
:generateDebugBuildConfig
 UP-TO-DATE
:generateDebugResValues
 UP-TO-DATE
:generateDebugResources UP-TO-DATE
:mergeDebugResources
 UP-TO-DATE
:processDebugManifest
 UP-TO-DATE
:processDebugResources
 UP-TO-DATE
:generateDebugSources UP-TO-DATE
:incrementalDebugJavaCompilationSafeguard
 UP-TO-DATE
:compileDebugJavaWithJavac
 UP-TO-DATE
:compileDebugNdk
 UP-TO-DATE
:compileDebugSources UP-TO-DATE
:mergeDebugShaders
 UP-TO-DATE
:compileDebugShaders
 UP-TO-DATE
:generateDebugAssets UP-TO-DATE
:mergeDebugAssets
 UP-TO-DATE
:transformClassesWithDexForDebug
 UP-TO-DATE
:mergeDebugJniLibFolders
 UP-TO-DATE
:transformNative_libsWithMergeJniLibsForDebug
 UP-TO-DATE
:processDebugJavaRes
 UP-TO-DATE
:transformResourcesWithMergeJavaResForDebug
 UP-TO-DATE
:validateSigningDebug

:packageDebug
 UP-TO-DATE
:assembleDebug UP-TO-DATE
:cdvBuildDebug UP-TO-DATE

BUILD SUCCESSFUL

Total time: 17.381 secs
Built the following apk(s):
        C:/Users/wwwni/Desktop/PappCorn/appviation/platforms/android/build/outputs/apk/android-debug.apk
ANDROID_HOME=C:\Users\wwwni\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\java\jdk1.8.0_131
No target specified, deploying to device '0428246317'.
Skipping build...
Built the following apk(s):
        C:/Users/wwwni/Desktop/PappCorn/appviation/platforms/android/build/outputs/apk/android-debug.apk
Using apk: C:/Users/wwwni/Desktop/PappCorn/appviation/platforms/android/build/outputs/apk/android-debug.apk
Package name: com.pappcorn.appviation
LAUNCH SUCCESS

Output for TX1032 when runs ionic cordova run android

ionic cordova run android

Running app-scripts build: --address 0.0.0.0 --port 8100 --p 8100 --livereload-port 35729 --r 35729 --iscordovaserve --externalIpRequired --nobrowser

[23:38:01]  build dev started ...
[23:38:01]  clean started ...
[23:38:01]  clean finished in 10 ms
[23:38:01]  copy started ...
[23:38:01]  transpile started ...
[23:38:09]  transpile finished in 8.76 s
[23:38:09]  preprocess started ...
[23:38:09]  preprocess finished in less than 1 ms
[23:38:09]  webpack started ...
[23:38:10]  copy finished in 9.30 s
[23:38:25]  webpack finished in 15.58 s
[23:38:25]  sass started ...
[23:38:30]  sass finished in 4.57 s
[23:38:30]  postprocess started ...
[23:38:30]  postprocess finished in less than 1 ms
[23:38:30]  lint started ...
[23:38:30]  build dev finished in 29.03 s
> cordova run android

[23:38:40]  lint finished in 10.14 s
ANDROID_HOME=C:\Users\wwwni\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\java\jdk1.8.0_131
Subproject Path: CordovaLib
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.
        at build_53o2yca4267baefhwe92ripa7.run(C:\Users\wwwni\Desktop\PappCorn\appviation\platforms\android\build.gradle:137)
The JavaCompile.setDependencyCacheDir() method has been deprecated and is scheduled to be removed in Gradle 4.0.

Incremental java compilation is an incubating feature.

The TaskInputs.source(Object) method has been deprecated and is scheduled to be removed in Gradle 4.0. Please use TaskInputs.file(Object).skipWhenEmpty() instead.

:preBuild
 UP-TO-DATE
:preDebugBuild UP-TO-DATE
:checkDebugManifest
:preReleaseBuild UP-TO-DATE
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl
 UP-TO-DATE
:CordovaLib:compileDebugNdk
 UP-TO-DATE
:CordovaLib:compileLint
 UP-TO-DATE
:CordovaLib:copyDebugLint
 UP-TO-DATE
:CordovaLib:mergeDebugShaders
 UP-TO-DATE
:CordovaLib:compileDebugShaders
 UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets
 UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles
 UP-TO-DATE
:CordovaLib:packageDebugRenderscript
 UP-TO-DATE
:CordovaLib:compileDebugRenderscript

UP-TO-DATE
:CordovaLib:generateDebugResValues

UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources

UP-TO-DATE
:CordovaLib:processDebugManifest
 UP-TO-DATE
:CordovaLib:generateDebugBuildConfig
 UP-TO-DATE
:CordovaLib:processDebugResources

UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:incrementalDebugJavaCompilationSafeguard
 UP-TO-DATE

:CordovaLib:compileDebugJavaWithJavac
 UP-TO-DATE
:CordovaLib:processDebugJavaRes
 UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForDebug
 UP-TO-DATE
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug
 UP-TO-DATE
:CordovaLib:mergeDebugJniLibFolders
 UP-TO-DATE
:CordovaLib:transformNative_libsWithMergeJniLibsForDebug
 UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForDebug
 UP-TO-DATE
:CordovaLib:bundleDebug
 UP-TO-DATE
:CordovaLib:preReleaseBuild UP-TO-DATE
:CordovaLib:checkReleaseManifest

:CordovaLib:prepareReleaseDependencies
:CordovaLib:compileReleaseAidl

UP-TO-DATE
:CordovaLib:compileReleaseNdk

UP-TO-DATE
:CordovaLib:copyReleaseLint
 UP-TO-DATE
:CordovaLib:mergeReleaseShaders

UP-TO-DATE
:CordovaLib:compileReleaseShaders
 UP-TO-DATE
:CordovaLib:generateReleaseAssets UP-TO-DATE
:CordovaLib:mergeReleaseAssets
 UP-TO-DATE
:CordovaLib:mergeReleaseProguardFiles UP-TO-DATE
:CordovaLib:packageReleaseRenderscript

UP-TO-DATE
:CordovaLib:compileReleaseRenderscript

UP-TO-DATE
:CordovaLib:generateReleaseResValues

UP-TO-DATE
:CordovaLib:generateReleaseResources UP-TO-DATE
:CordovaLib:packageReleaseResources
 UP-TO-DATE

:CordovaLib:processReleaseManifest

UP-TO-DATE
:CordovaLib:generateReleaseBuildConfig

UP-TO-DATE
:CordovaLib:processReleaseResources
 UP-TO-DATE

:CordovaLib:generateReleaseSources
 UP-TO-DATE
:CordovaLib:incrementalReleaseJavaCompilationSafeguard

UP-TO-DATE
:CordovaLib:compileReleaseJavaWithJavac

UP-TO-DATE
:CordovaLib:processReleaseJavaRes

UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForRelease
 UP-TO-DATE

:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForRelease
 UP-TO-DATE

:CordovaLib:mergeReleaseJniLibFolders
 UP-TO-DATE

:CordovaLib:transformNative_libsWithMergeJniLibsForRelease

UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForRelease
 UP-TO-DATE
:CordovaLib:bundleRelease

UP-TO-DATE
:prepareComAndroidSupportCardviewV72340Library

UP-TO-DATE
:prepareComAndroidSupportCustomtabs2340Library

UP-TO-DATE
:prepareComAndroidSupportSupportV42411Library

UP-TO-DATE
:prepareComFacebookAndroidFacebookAndroidSdk4141Library
 UP-TO-DATE

:prepareOrgApacheCordovaCordovaLib623DebugLibrary
 UP-TO-DATE

:prepareDebugDependencies

:compileDebugAidl
 UP-TO-DATE

:compileDebugRenderscript
 UP-TO-DATE

:generateDebugBuildConfig

UP-TO-DATE
:generateDebugResValues

UP-TO-DATE
:generateDebugResources UP-TO-DATE
:mergeDebugResources

UP-TO-DATE
:processDebugManifest
 UP-TO-DATE

:processDebugResources

UP-TO-DATE
:generateDebugSources UP-TO-DATE
:incrementalDebugJavaCompilationSafeguard

UP-TO-DATE
:compileDebugJavaWithJavac
 UP-TO-DATE

:compileDebugNdk UP-TO-DATE
:compileDebugSources UP-TO-DATE
:mergeDebugShaders

UP-TO-DATE
:compileDebugShaders

UP-TO-DATE
:generateDebugAssets UP-TO-DATE
:mergeDebugAssets
 UP-TO-DATE

:transformClassesWithDexForDebug
 UP-TO-DATE

:mergeDebugJniLibFolders
 UP-TO-DATE

:transformNative_libsWithMergeJniLibsForDebug
 UP-TO-DATE

:processDebugJavaRes
 UP-TO-DATE

:transformResourcesWithMergeJavaResForDebug

UP-TO-DATE
:validateSigningDebug

:packageDebug

UP-TO-DATE
:assembleDebug UP-TO-DATE
:cdvBuildDebug
 UP-TO-DATE

BUILD SUCCESSFUL

Total time: 22.0 secs
Built the following apk(s):
        C:/Users/wwwni/Desktop/PappCorn/appviation/platforms/android/build/outputs/apk/android-debug.apk

ANDROID_HOME=C:\Users\wwwni\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\java\jdk1.8.0_131
No target specified, deploying to device 'TA9290HNAE'.

Skipping build...
Built the following apk(s):
        C:/Users/wwwni/Desktop/PappCorn/appviation/platforms/android/build/outputs/apk/android-debug.apk

Using apk: C:/Users/wwwni/Desktop/PappCorn/appviation/platforms/android/build/outputs/apk/android-debug.apk

Package name: com.pappcorn.appviation
LAUNCH SUCCESS

Other information:

When I try play audio in motorola TX1032 I get the following error, this don't occurs in Motorola TX1040

I get this error in the chrome console: (inspect)

undefined:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

Some styles depending on devices

Image TX1040 (Styles Work)

Image TX1032 (styles don't work in this exercise)

`` insert the output from ionic info here

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.1.3
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 2.1.0

System:

    Node       : v7.9.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3

I appreciate any help, thanks.

[AmitMY]

• About styles - weird issue. Are those custom styles (that break)? Does it work in serve always?
• About playing audio - Are you trying to play audio with JS? If so, Failed to load because no supported source was found. means that your phone can't play this type of audio. Use nativeaudio cordova plugin for native support.

I would recommend updating your framework and app-scripts to 3.4.2 and 1.3.7. The transition from v2 to v3 is minor, just a small amount of steps you can see in the changelog of v3.0.0. It is always best to be on an up to date (supported) version, and it might solve your styles issue, if that was a real bug in some version before.

[jgw96]

Also, @Nexeuz , what version of Android is the second device running? I'm guessing the moto g (the first device you mention) is running either 5.x or 6.x.

[Nexeuz]

Hi all thanks for response

@AmitMY styles works fine when I try in serve but in platform styles broken on Moto g TX1032. Image in server

About your second point I am using javascript to record audio, I try to change but this is stranger behavior because devices have almost the same specifications

this is code archive that record audio.

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavController, NavParams, Slides, AlertController, LoadingController } from 'ionic-angular';
import { MediaPlugin, File } from 'ionic-native'; //importar libreria para grabar
import * as firebase from 'firebase'
import { ExercisesPage } from '../exercises/exercises';
declare var cordova: any //declaramos a cordova

@Component({
  selector: 'page-interaction-practice',
  templateUrl: 'interaction-practice.html'
})
export class InteractionPracticePage implements OnInit{

  @ViewChild('sliderInteraction') slider: Slides;

  mySlideOptions = {
    slidesPerView: 2,
    centeredSlides: true,
    spaceBetween : 270
  };

  contentLoad = false

   newFile: any ///variable que recibe el audio

    Audiotemporal = new Audio() ///instancia para crear el audio

  eInfo : any
  description : any
  practiceNum : any
  exerciseNum : any
  btnDone = false

  // Ejercicios
  ex1 = false
  ex2 = false
  ex3 = false
  ex4 = false
  ex5 = false
  ex6 = false
  ex7 = false
  ex8 = false
  ex9= false
  ex10= false

  // Prácticas
  prac1 = true
  prac2 = true
  prac3 = true
  // recording = document.getElementById('recording')

  // Contenido de la práctica 1 en el ejercicio 1
  ex1Content = [{"description" : "What is the call sign that we heard in the recording?", "intTxt" : "Can you tell me...","src":"","url":""}, {"description" : "What did the pilot decide to do?", "intTxt" : "I’d like to know...","src":"","url":""}, {"description" : "Why didn’t the crew ask for a priority landing?", "intTxt" : "I don’t get why...","src":"","url":""}, {"description" : "Where did the aircraft land?", "intTxt" : "I wonder if you could tell...","src":"","url":""}, {"description" : "When was the autopilot disengaged?", "intTxt" : "Have you got any idea...","src":"","url":""}]

  // Contenido de la práctica 1 en el ejercicio 2
  ex2Content = [{"description" : "I think that the runway was occupied because the pilot asked for a go-around after the thick cloud.", "hasDescription" : "Then the other person replies: I consider that there were bad weather conditions, so the pilot decided not to land when realizing there was an obstacle on the runway."}, {"description" : "The communications were garbled and the plane was having fuel starvation due to clogged filter.", "hasDescription" : "They were having fuel problems and as a consequence the communication were affected."}, {"description" : "I believe there was spurious INS warning.", "hasDescription" : "I understood the crew was having a navigational problem."}, {"description" : "The pilot and flight attendants successfully put out the fire.", "hasDescription" : "They could extinguish the fire."}, {"description" : "The crew wanted to know whether they could have staff to look after the passengers as soon as they landed.", "hasDescription" : "The crew needed to know whether they were going to have assistance on ground."}]

  // Contenido de la práctica 1 en el ejercicio 4
  ex4Content = ["The pilot reported minimum fuel and 20 minutes fuel endurance.","They are unable to extend their right-hand main gear.", "There were vibrations on Engine Number 2, although the engine seems to be running smoothly.", "The rear cabin crew has reported two agitated passengers who seem to be threatening the crew in the forward galley.", "There is smoke coming from the overhead circuit breaker panel."]

  // Contenido de la práctica 1 en el ejercicio 6
  ex6Prac1Words = ['“As the GPWS system was switched off, the crew did not extend the gear up and as a consequence their belly landing was a normal procedure to follow”.', '“As soon as the other aircraft did comply the instruction from the ATC, both planes were facing a near miss which could have been averted by focusing on their maneuvers”.', '“It is unacceptable what the crew decided to perform since the first action to do is to acknowledge the ATC to get assistance”.', '“I agree with the manager when he admitted that VIP flights should be directed to military airports only so that congestion might be reduced”.']

  // Contenido de la práctica 1 en el ejercicio 6
  ex9Prac1Words = ['“I believe that aviation has become my passion and the main reason why I’m giving my best every day. Having the responsibility of tons of souls make me feel like a hero sometimes…I don’t know”', '“Asking for priority landing has always been a challenging situation to face when flying since one never wants to deal with it. One thinks about having an excellent flight with no obstacles, however these situations can constantly take place. Therefore and based on studies and experiences, landing on water is a better option to choose.”', '“I think that flight attendants should have more contact with the radio communications and pilots’ training since accidents and incidents may firstly affect them, hence the crew ought to have more contact and deal with the unforeseen situations.”', '“Regarding the maintenance process, I consider people are not really trained for that job. Pilots should be in charge of almost everything related to the aircraft based on my own experience in aviation”']

  cardBtnMic = false
  cardBtnStop = false
  cardBtnPlay = false

  // Menús dentro del footer (Grabar un audio, grabar varios audios, enviar la práctica)
  menuOnceRecord : boolean = false
  menuDone : boolean = false

  // Botones para grabar (Reproducir, grabar, detener y enviar)
  playBtnRecord : boolean = false
  recBtnRecord : boolean = true
  stopBtnRecord : boolean = false
  sendRecord : boolean = false

  // -- Atributos para grabar
  arrayRecording = []
  actualRecordingAudio //capturar el audio recen grabado.
  contName : number = 0
  blobUrl
  timeRecLbl : any

  constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl : AlertController, public loadingCtrl : LoadingController) {
    this.practiceNum = this.navParams.get('numEx')
    this.exerciseNum = this.navParams.get('item')
    this.pushExercises()
    this.pushPractices()

  }

  ngOnInit(){
    firebase.database().ref('interactionPractice').once('value', data => {
      this.description = data.val()[this.exerciseNum-1][this.practiceNum-1].description
    }).then(() => {this.contentLoad = true})
  }

    /**
   * Método que se ejecuta cuando el usuario sale de la pantalla de comprehension practice
   * @memberOf ComprehensionPracticePage
   */
  ngOnDestroy() {
    this.Audiotemporal.pause() //pausar el audio reproducido.
  }

  /**
   * Muestra del ejercicio según la selección del usuario
   * @memberOf InteractionPracticePage
   */
  pushExercises() : void{
    switch(this.exerciseNum){
      case "1" :
        this.ex1 = true
        if(this.practiceNum == 1){
          this.cardBtnMic = true    
          this.menuDone = true
        }
      break;

      case "2" :
        this.ex2 = true
        if(this.practiceNum == 1){
        }
      break;

      case "3" :
        this.ex3 = true
        if(this.practiceNum == 1){
        }
      break;

      case "4" :
        this.btnDone = true
        if(this.practiceNum == 1){
          this.ex4 = true
          this.cardBtnMic = true
        }
      break;

      case "5" :
        this.ex5 = true
        if(this.practiceNum == 1){
        }
      break;

      case "6" :
        this.ex6 = true
      break;

      case "7" :
        this.ex7 = true
      break;

      case "8" :
        this.ex8 = true
      break;

      case "9" :
        this.ex9 = true
      break;

      case "10" :
        this.ex10 = true
      break;
    }
  }
  /**
   * Muestra la práctica según la selección del usuario
   * @memberOf InteractionPracticePage
   */
  pushPractices() : void{ 
    switch(this.practiceNum){
      case 1 :
      this.prac1 = true
      this.menuOnceRecord = true

      break;
      case 2 :
        this.prac2 = true
      break;
      case 3 :
        this.prac3 = true
      break;
    }
  }
//-------------------------------------------------------------------------------------------------------///
//----------------------------------------MÉTODOS PARA GRABAR--------------------------------------------///
//-------------------------------------------------------------------------------------------------------///

//------------------------------------------------------------------------------------------------------//
//---------------------------------------EJERCICIO 1 PRACTICA 1---------------------------------------///
////--------------------------------------------------------------------------------------------------///

 /**
  * 
  * 
  * @param {any} index 
  * 
  * @memberof InteractionPracticePage
  */
  resetNewFile() {
    this.newFile = new MediaPlugin("appviation.mp3")
  }
/**
 * 
 * 
 * @param {any} index Recibe el parametro de donde esta parado.
 * 
 * @memberof InteractionPracticePage
 */
record(index){

  document.getElementById( 'Record-' + index ).classList.add('hide')
  document.getElementById( 'StopRecord-' + index ).classList.remove('hide')
  document.getElementById( 'playRecord-' + index ).classList.add('hide')
  this.startRecord()

    for(let i = 0; i<= 4; i++ ){ // ocultar todos los botones de grabar cuando este grabando
      document.getElementById( 'Record-' + i ).classList.add('hide')
      document.getElementById( 'playRecord-' + i ).classList.add('hide')

  }

}

 startRecord() {
    this.resetNewFile()
    this.newFile.startRecord()
  }

/**
 * 
 * 
 * @param {any} index  recibe la posición donde esta el arreglo del Slide.
 * 
 * @memberof InteractionPracticePage
 */
stopRecording(index){

for(let i = 0;  i < this.ex1Content.length; i++ ){ // for para evaluar que el arreglo con los audios no este vacio
  if(this.ex1Content[i].src!="" && this.ex1Content[i].url!="" ){// si los audios en el arreglo dan como diferente a vacio
    document.getElementById( 'playRecord-' + i ).classList.remove('hide')// se quita la clase hide que sirve para ocultar el elemento en esa posicion.
  }else{
    console.log("no esta vacio, no se quita playrecord");
  }
}

  for(let i = 0; i<= 4; i++ ){ // ocultar todos los botones de grabar cuando este grabando
      document.getElementById( 'Record-' + i ).classList.remove('hide')

  }
  document.getElementById( 'StopRecord-' + index ).classList.add('hide')
  document.getElementById( 'playRecord-' + index ).classList.remove('hide')
  document.getElementById('pauseAudioRecord-'+index).classList.add('hide')
  this.stopRecord(index)
} 

  /**
   * Detiene la grabación y almacena el archivo en un vector.
   * @param {number} id Este es el id del audio que está grabando para que se guarde en esa posición en el vector
   * @memberof FluencyPracticePage
   */
  stopRecord(id: number) {
    let blob
    this.newFile.stopRecord() //detener 
    File.readAsArrayBuffer(cordova.file.externalRootDirectory, 'appviation.mp3').then((file) => {// Arrayy buffer recibe dos parametros, la ruta del archivo el nombre del archivo
      blob = new Blob([file], { type: 'audio/mpeg' })//se crea una instancia con ese archivo y se le pasa el métadato de tipo audio.
      this.ex1Content[id]['src'] = blob //se le asigna la ruta al archivo 
      this.ex1Content[id]["url"] = URL.createObjectURL(blob) // se 
      console.log(this.ex1Content);

    }).catch(err => console.log(err))
    this.contName++
  }
////--------------------------------------------------------------------------------------------------------//
//---------------------------------------------MÉTODOS PARA REPRODUCIR---------------------------------------//
////--------------------------------------------------------------------------------------------------------//
/**
 * 
 * @param index Paranetro de la posicion del array.
 */
playRecords(index){ 
  debugger
  document.getElementById( 'pauseAudioRecord-' + index ).classList.remove('hide')
  document.getElementById( 'playRecord-' + index ).classList.add('hide')
  document.getElementById( 'Record-' + index ).classList.add('hide')

  this.Audiotemporal.src = this.ex1Content[index].url //indicamos la URL del audio y lo sacamos de la posicion del array donde está almacenado, para reproducrlo :3
  this.Audiotemporal.load() // cargamoss el audio
  this.Audiotemporal.play() // damos play al audio.

  for(let i = 0; i<= 4; i++ ){ // ocultar todos los botones cuando la grabación de mi voz este reproduciendose
      document.getElementById( 'Record-' + i ).classList.add('hide') 
      document.getElementById( 'playRecord-' + i ).classList.add('hide')

  }

    this.Audiotemporal.onended = () => { // when audio halla finalizado de reproducirse.
      document.getElementById( 'pauseAudioRecord-' + index ).classList.add('hide')
      document.getElementById( 'Record-' + index ).classList.remove('hide')

        for(let i = 0; i < this.ex1Content.length; i++ ){
          if(this.ex1Content[i].src!="" && this.ex1Content[i].url!="" ){// si los audios en el arreglo dan como diferente a vacio
           document.getElementById( 'playRecord-' + i ).classList.remove('hide')
          }else{
          document.getElementById( 'playRecord-' + i ).classList.add('hide')
        }
      }
        for(let i = 0; i<= 4; i++ ){ // hasta que el audido halla finalizado de reproducirse
            document.getElementById( 'Record-' + i ).classList.remove('hide') //remover la clase hide de los botones de los microfonos

        }
    }

}

pauseRecords(index){
  debugger

      document.getElementById( 'pauseAudioRecord-' + index ).classList.add('hide')
       for(let i = 0; i < this.ex1Content.length; i++ ){
          if(this.ex1Content[i].src!="" && this.ex1Content[i].url!="" ){// si los audios en el arreglo dan como diferente a vacio
            document.getElementById( 'playRecord-' + i ).classList.remove('hide')
         }else{
           document.getElementById( 'playRecord-' + i ).classList.add('hide')
        }
      }

      for(let i = 0; i<= 4; i++ ){ // Remover hide del boton de grabar cuando halla pausado la grabación.
            document.getElementById( 'Record-' + i ).classList.remove('hide') //remover la clase hide de los botones de los microfonos

      }
    this.Audiotemporal.src = this.ex1Content[index].url //indicamos el source del audio y lo sacamos de la posicion del array donde está almacenado :3
    this.Audiotemporal.pause() // damos pause al audio.
}

  helpMenu(){
    let alert = this.alertCtrl.create({
      title : 'Help',
      message : 'Have any questions?',
      inputs : [
        {
          name : 'message',
          placeholder : 'Message'
        }
      ],
      buttons : [
        {
          text : 'Cancel',
          handler : data => {
          } 
        },
        {
          text : 'Send',
          handler : data => {
          } 
        }
      ]
    })
    alert.present()
  }

}

HTML

  <div *ngIf="ex1" class="ex1">
    <!--*************************
      Práctica 1
    **************************-->
    <div *ngIf="prac1">
      <ion-slides *ngIf="prac1" class="content-figures first_style_slides" #sliderInteraction [options]="mySlideOptions" pager paginationType="progress">
        <ion-slide class="practice-slide-white" *ngFor="let content of ex1Content; let i = index">
        <div class="figure">
            <p class="figureTxtGray">
              {{content.description}}
            </p>
            <p class="introductoryTxt">{{content.intTxt}}</p>
                <!--Hacer la grabación y escucharla-->
              <img id="pauseAudioRecord-{{i}}" class="imgPlay hide" (click)="pauseRecords(i)" src="assets/img/iconsRecord/pause.svg">
              <img id="playRecord-{{i}}" class="imgPlay hide" (click)="playRecords(i)" src="assets/img/iconsRecord/play.svg">
              <img id="StopRecord-{{i}}" class="imgStop hide" (click)="stopRecording(i)" src="assets/img/iconsRecord/stop.svg">
              <img id="Record-{{i}}" class="imgRec" (click)="record(i)" src="assets/img/iconsRecord/mic.svg">
          </div>
        </ion-slide>
      </ion-slides>

      <!--<div class="footer__ws">
        <ion-icon class="menu_rec_help"  ios="md-help-circle" md="md-help-circle" (click)="helpMenu()"></ion-icon>
        <div class="menu_rec">
          <button class="sendBtn" (click)="sendAnswer(audioListening)">Send</button>
        </div>
      </div>-->
    </div>

Same image of styles in serve

@jgw96 moto G TX1032 has android 6.0.1 and moto G TX1040 has android 5.1.

for update, I try update my package.json, like this:

{
    "name": "ionic-hello-world",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@angular/platform-server": "2.2.1",
        "@ionic-native/camera": "^3.3.0",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/media": "^3.4.4",
        "@ionic/storage": "2.0.1",
        "@reactivex/rxjs": "^5.0.0",
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-camera": "^2.4.1",
        "cordova-plugin-compat": "^1.1.0",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-facebook4": "~1.7.4",
        "cordova-plugin-file": "^4.3.3",
        "cordova-plugin-media": "^3.0.1",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.1",
        "cordova-plugin-vibration": "^2.1.5",
        "cordova-plugin-whitelist": "^1.3.1",
        "firebase": "^3.6.10",
        "ionic-angular": "3.4.2",
        "ionic-native": "2.4.1",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionic2": "git+https://github.com/ionic-team/ionic.git",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "1.3.7",
        "@ionic/cli-plugin-cordova": "1.4.0",
        "@ionic/cli-plugin-ionic-angular": "1.3.1",
        "typescript": "^2.3.4"
    },
    "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "ionic-plugin-keyboard",
        "cordova-plugin-splashscreen"
    ],
    "cordovaPlatforms": [],
    "description": "Appviation: An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-media": {},
            "cordova-plugin-camera": {},
            "cordova-plugin-file": {},
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-vibration": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-facebook4": {
                "APP_ID": "680848528736846",
                "APP_NAME": "Appviation"
            }
        },
        "platforms": [
            "android",
            "ios"
        ]
    }
}

then I try ran npm install and then ran ionic info, I don't get changes :( any help to update please

ionic info: before of update:

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.1.3
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 2.1.0

System:

    Node       : v7.9.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3

[AmitMY]

npm update won't help, as the version is hardcoded in your package.json file. First, update to 3.0.0 which you can see steps for here After that works, and your app boots correctly, update to 3.4.0 with steps here

app-scripts will be updated as well, as part of the steps is to change dependencies.

If it does not let you update, just rm -r -f node_modules, and then npm install

Can you share your repository? sharing your code here in plain text is not really helping because I assume the styles issue is a build issue, if it also happens in serve.

[Nexeuz]

Hi all, I could update my project but the problem persists, about project is a private repository and my company does not allow share, but I will try of share this is my new ionic info, I can share some code. but no know where.

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.4.2

System:

    Node       : v7.9.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3

[AmitMY]

@Nexeuz hmm... Because we don't know how to reproduce it, perhaps you can fork your repository, and remove everything but the problematic part, or create a new public repo with ionic start and reproduce the problem there.

[Nexeuz]

Hi @AmitMY and @jgw96 my company authorized, that you have access, can you give me an email to send them the invitation please? the project is a little big. thank you !

[AmitMY]

I can try to help on the scss bug if it happens on serve, but not on device as I don't have those devices, @jgw96 might have, but not sure. [removed email because google]

[Nexeuz]

this is the problem, bug occurs just on platform. ummm I hope that @jgw96 may be have them

[jgw96]

Hey @Nexeuz , could you share a minimal example that we can use to see the style issues please instead of a full repo? This will help limit the code to only what is causing the issue and make it much easier for us to debug. Also, at this time i would like to make this issue specific to the styling issues you were seeing as the audio issues sound more like a support question ( forum, slack channel) or an ionic-native issue.

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.