Ionic + videogular 2, not working iOS device


#1

Everithing working great on ionic serve and ionic run android. Some how ionic run ios throw the following when page is opened:

[03:33:55]  console.error: EXCEPTION: Error in ./MultiPage class MultiPage - inline template:25:6 caused by: undefined 
            is not an object (evaluating 'this.medias.toArray()[0].elem') 
[03:33:55]  console.error: ORIGINAL EXCEPTION: undefined is not an object (evaluating 'this.medias.toArray()[0].elem') 
[03:33:55]  console.error: ORIGINAL STACKTRACE: 
[03:33:55]  console.error: init@http://192.168.25.2:8100/build/main.js:20938:60 
            ngAfterContentInit@http://192.168.25.2:8100/build/main.js:91926:24 detectChangesInternal 
            detectChanges@http://192.168.25.2:8100/build/main.js:100685:35 
            detectChanges@http://192.168.25.2:8100/build/main.js:100778:48 
            detectChangesInNestedViews@http://192.168.25.2:8100/build/main.js:100870:50 detectChangesInternal 
            detectChanges@http://192.168.25.2:8100/build/main.js:100685:35 
            detectChanges@http://192.168.25.2:8100/build/main.js:100778:48 detectChangesInternal 
            detectChanges@http://192.168.25.2:8100/build/main.js:100685:35 
            detectChanges@http://192.168.25.2:8100/build/main.js:100778:48 
            detectChangesInNestedViews@http://192.168.25.2:8100/build/main.js:100870:50 detectChangesInternal 
            detectChanges@http://192.168.25.2:8100/build/main.js:100685:35 
            detectChanges@http://192.168.25.2:8100/build/main.js:100778:48 detectChangesInternal 
            detectChanges@http://192.168.25.2:8100/build/main.js:100685:35 
            detectChanges@http://192.168.25.2:8100/build/main.js:100778:48 detectChangesInternal 
            detectChanges@http://192.168.25.2:8100/build/main.js:100685:35 
            detectChanges@http://192.168.25.2:8100/build/main.js:100778:48 
            detectChangesInNestedViews@http://192.168.25.2:8100/build/main.js:100870:50 detectChangesInternal 
            detectChanges@http://192.168.25.2:8100/build/main.js:100685:35 
            detectChanges@http://192.168.25.2:8100/build/main.js:100778:48 detectChangesInternal 
            detectChanges@http://192.168.25.2:8100/build/main.js:100685:35 
            detectChanges@http://192.168.25.2:8100/build/main.js:100778:48 
            detectChanges@http://192.168.25.2:8100/build/main.js:56041:33 forEach@[native code] 
            tick@http://192.168.25.2:8100/build/main.js:36064:45 http://192.168.25.2:8100/build/main.js:36005:109 
            onInvoke@http://192.168.25.2:8100/build/main.js:38209:43 
            run@http://192.168.25.2:8100/build/polyfills.js:3:6487 next@http://192.168.25.2:8100/build/main.js:36005:84 
            http://192.168.25.2:8100/build/main.js:37409:56 __tryOrUnsub@http://192.168.25.2:8100/build/main.js:20651:20 
            next@http://192.168.25.2:8100/build/main.js:20600:34 _next@http://192.168.25.2:8100/build/main.js:20553:30 
            next@http://192.168.25.2:8100/build/main.js:20517:23 next@http://192.168.25.2:8100/build/main.js:14730:29 
            emit@http://192.168.25.2:8100/build/main.js:37401:80 
            checkStable@http://192.168.25.2:8100/build/main.js:38177:44 
            onLeave@http://192.168.25.2:8100/build/main.js:38244:25 
            onInvokeTask@http://192.168.25.2:8100/build/main.js:38203:34 
            invokeTask@http://192.168.25.2:8100/build/polyfills.js:3:9671 
            runTask@http://192.168.25.2:8100/build/polyfills.js:3:7093 
            invoke@http://192.168.25.2:8100/build/polyfills.js:3:10843 dispatchEvent@[native code] 
            handleTapPolyfill@http://192.168.25.2:8100/build/main.js:72248:36 
            pointerEnd@http://192.168.25.2:8100/build/main.js:72158:35 [native code] 
            handleTouchEnd@http://192.168.25.2:8100/build/main.js:109099:41 [native code] 
[03:33:55]  console.error: ERROR CONTEXT: 


My system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.1.0
ios-deploy version: 1.9.2
ios-sim version: 6.1.2
OS: OS X El Capitan
Node Version: v8.9.0
Xcode version: Xcode 8.0 Build version 8A218a


#2

NPM packages added for videogular2:

npm install videogular2 --save
npm install @types/core-js --save-dev

Plus, for HLS streaming:

npm install hls.js --save

Everything well configured on app.module, if not, wouldn’t work on Android right? So what could be happening that only on ios build its not working?


#4

package:

{
“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": “2.2.1”,
"@ angular/compiler": “2.2.1”,
"@ angular/compiler-cli": “2.2.1”,
"@ angular/core": “2.2.1”,
"@ angular/forms": “2.2.1”,
"@ angular/http": “2.2.1”,
"@ angular/platform-browser": “2.2.1”,
"@ angular/platform-browser-dynamic": “2.2.1”,
"@ angular/platform-server": “2.2.1”,
"@ ionic-native/onesignal": “^4.3.3”,
"@ ionic/storage": “1.1.7”,
“hls.js”: “^0.8.4”,
“ionic-angular”: “2.0.1”,
“ionic-native”: “2.4.1”,
“ionicons”: “3.0.0”,
“rxjs”: “5.0.0-beta.12”,
“sw-toolbox”: “3.4.0”,
“videogular2”: “^5.5.2”,
“zone.js”: “0.6.26”
},
“devDependencies”: {
"@ ionic/app-scripts": “1.1.0”,
"@ types/core-js": “^0.9.43”,
“typescript”: “2.0.9”
},
“cordovaPlugins”: [
“ionic-plugin-keyboard”,
“cordova-plugin-whitelist”,
“cordova-plugin-console”,
“cordova-plugin-statusbar”,
“cordova-plugin-device”,
{
“id”: “cordova-plugin-facebook4”,
“locator”: “cordova-plugin-facebook4”,
“variables”: {
“APP_ID”: “----”,
“APP_NAME”: “—”
}
},
“com.hutchind.cordova.plugins.streamingmedia”,
“cordova-plugin-splashscreen”,
“cordova-plugin-crosswalk-webview”,
“onesignal-cordova-plugin”
],
“cordovaPlatforms”: [
{
“platform”: “android”,
“version”: “”,
“locator”: “android”
},
{
“platform”: “ios”,
“version”: “”,
“locator”: “ios”
}
],
“description”: “”
}

Already removed packages, platforms, reinstalled and, state reset and all that… None solved.

btw html code:

<ion-col text-center (click)="play('1')" style="padding: 0 3px 3px 0">
  <img *ngIf="cam1 == null" src="assets/img/stock.png">
  <vg-player *ngIf="cam1 != null">
    <video #media [vgHls]="cam1" muted autoplay></video>
  </vg-player>
</ion-col>

Cheers!


#5

were you able to solve this problem?