I need to integrate videogular2 on my Ionic 3 app. So I have done these things:
npm install videogular2@6.1.1 --save
npm install @types/core-js --save-dev
My page module: live-event-video.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LiveEventVideo } from './live-event-video';
import { VgCoreModule } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';
import { VgBufferingModule } from 'videogular2/buffering';
import {SingleMediaPlayer} from './single-media-player';//This line shows error
@NgModule({
declarations: [
LiveEventVideo,
SingleMediaPlayer
],
imports: [
IonicPageModule.forChild(LiveEventVideo),
VgCoreModule,
VgControlsModule,
VgOverlayPlayModule,
VgBufferingModule
],
providers: [ScreenOrientation],
bootstrap: [SingleMediaPlayer]
})
export class LiveEventVideoModule { }
Here it shows this error [ts] Cannot find module './single-media-player'. [2307] Any clue?
html
<vg-player>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
</vg-player>
package.json
{
"name": "am",
"version": "3.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"config": {
"ionic_copy": "./config/copy.config.js"
},
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"optionalDependencies": {
"ios-deploy": "^1.9.4"
},
"dependencies": {
"@agm/core": "^1.0.0-beta.2",
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/app-version": "^4.18.0",
"@ionic-native/background-geolocation": "^4.15.0",
"@ionic-native/background-mode": "^4.8.0",
"@ionic-native/branch-io": "^4.15.0",
"@ionic-native/camera": "^4.5.2",
"@ionic-native/clipboard": "^4.9.1",
"@ionic-native/contacts": "^4.7.0",
"@ionic-native/core": "^4.14.0",
"@ionic-native/diagnostic": "^4.15.0",
"@ionic-native/document-viewer": "^4.15.0",
"@ionic-native/facebook": "^4.12.2",
"@ionic-native/file": "^4.5.2",
"@ionic-native/file-opener": "^4.11.0",
"@ionic-native/file-transfer": "^4.11.0",
"@ionic-native/geolocation": "^4.5.2",
"@ionic-native/google-maps": "^4.14.0",
"@ionic-native/image-resizer": "^4.7.0",
"@ionic-native/in-app-browser": "^4.12.0",
"@ionic-native/keyboard": "^4.11.0",
"@ionic-native/location-accuracy": "^4.5.2",
"@ionic-native/market": "^4.18.0",
"@ionic-native/mixpanel": "^4.15.0",
"@ionic-native/music-controls": "^4.8.0",
"@ionic-native/onesignal": "^4.15.0",
"@ionic-native/screen-orientation": "^4.11.0",
"@ionic-native/sms": "^4.15.0",
"@ionic-native/social-sharing": "^4.9.1",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"@ionic/pro": "^1.0.20",
"@ionic/storage": "2.1.3",
"@types/node": "^10.12.18",
"@vimeo/player": "^2.6.3",
"angular-progress-bar": "^1.0.3",
"angular-svg-round-progressbar": "^2.0.0",
"angular2-google-place": "^2.0.2",
"angular2-jwt": "^0.2.3",
"angularfire2": "5.0.0-rc.6",
"animate.css": "^3.5.2",
"branch-cordova-sdk": "^3.1.5",
"com.synconset.imagepicker": "^2.1.10",
"cordova-android": "6.4.0",
"cordova-clipboard": "^1.2.1",
"cordova-custom-config": "^5.0.3",
"cordova-ios": "4.5.5",
"cordova-plugin-add-swift-support": "^1.7.1",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-background-mode": "git+https://github.com/katzer/cordova-plugin-background-mode.git",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-contacts": "^3.0.1",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-document-viewer": "^0.9.10",
"cordova-plugin-facebook4": "^2.5.0",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-opener2": "^2.1.4",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-googlemaps": "^2.4.6",
"cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#2.6.0",
"cordova-plugin-inappbrowser": "^3.0.0",
"cordova-plugin-ionic-webview": "^3.1.1",
"cordova-plugin-market": "^1.2.0",
"cordova-plugin-mauron85-background-geolocation": "^2.3.6",
"cordova-plugin-mixpanel": "^4.5.2",
"cordova-plugin-music-controls": "^2.2.0",
"cordova-plugin-nativegeocoder": "^3.1.3",
"cordova-plugin-request-location-accuracy": "^2.2.3",
"cordova-plugin-screen-orientation": "^3.0.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "^5.4.4",
"cordova-sms-plugin": "^0.1.13",
"cordova-sqlite-storage": "^2.6.0",
"cordova.plugins.diagnostic": "^4.0.10",
"css-animator": "^2.3.0",
"es6-promise-plugin": "^4.2.2",
"firebase": "4.8.2",
"google-maps": "^3.2.1",
"info.protonet.imageresizer": "^0.1.1",
"ionic-angular": "3.9.2",
"ionic-plugin-keyboard": "^2.2.1",
"ionic2-auto-complete": "^1.6.2-alpha",
"ionic2-google-places-autocomplete": "^1.0.2",
"ionicons": "3.0.0",
"jwt-decode": "^2.2.0",
"list": "1.0.0",
"moment": "^2.23.0",
"ng-lazyload-image": "3.4.2",
"ng2-pdf-viewer": "^5.2.3",
"ngx-slick": "^0.2.1",
"onesignal-cordova-plugin": "^2.4.6",
"promise-polyfill": "^8.0.0",
"raven-js": "^3.27.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"tslib": "^1.9.3",
"videogular2": "^6.1.1",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "^3.2.1",
"@ionic/lab": "1.0.11",
"@types/core-js": "^2.5.0",
"@types/googlemaps": "^3.30.16",
"typescript": "2.4.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"ionic-plugin-keyboard": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-camera": {
"CAMERA_USAGE_DESCRIPTION": "Upload profile pic",
"PHOTOLIBRARY_USAGE_DESCRIPTION": "Upload profile pic",
"PHOTO_LIBRARY_USAGE_DESCRIPTION": "App would like to access the library."
},
"cordova-plugin-file": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate your Location"
},
"cordova-plugin-contacts": {
"CONTACTS_USAGE_DESCRIPTION": "To invite Friends"
},
"cordova-plugin-splashscreen": {},
"cordova-plugin-request-location-accuracy": {},
"cordova-plugin-statusbar": {},
"info.protonet.imageresizer": {},
"cordova-sqlite-storage": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-music-controls": {},
"cordova-plugin-background-mode": {},
"cordova-clipboard": {},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
},
"cordova-plugin-screen-orientation": {},
"cordova-plugin-file-opener2": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-app-version": {},
"cordova-plugin-inappbrowser": {},
"com.synconset.imagepicker": {
"PHOTOLIBRARY_USAGE_DESCRIPTION": "App would like to access the library.",
"PHOTO_LIBRARY_USAGE_DESCRIPTION": "App would like to access the library."
},
"cordova-plugin-facebook4": {
"APP_ID": "14934",
"APP_NAME": "Are",
"FACEBOOK_ANDROID_SDK_VERSION": "4.+"
},
"cordova-plugin-mixpanel": {
"PLAY_SERVICES_VERSION": "+"
},
"cordova-plugin-document-viewer": {},
"branch-cordova-sdk": {},
"cordova.plugins.diagnostic": {},
"cordova-sms-plugin": {},
"cordova-plugin-nativegeocoder": {
"LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
},
"onesignal-cordova-plugin": {},
"cordova-custom-config": {},
"cordova-plugin-market": {}
},
"cordova-plugin-ionic": {
"APP_ID": "7",
"CHANNEL_NAME": "Production",
"UPDATE_METHOD": "background",
"MAX_STORE": "2"
},
"cordova-plugin-ionic-webview": {},
"platforms": [
"ios",
"android"
]
},
"platforms": [
"android",
"ios"
]
}
Ionic info
Ionic:
ionic (Ionic CLI) : 4.5.0 (C:\Users\Sampath\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.1
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : not available
Cordova Plugins : no whitelisted plugins (0 plugins total)
System:
NodeJS : v10.14.1 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10
It was their internal component. Not related to the videogular2 core modules.
This is working fine.
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LiveEventVideo } from './live-event-video';
import { VgCoreModule } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';
import { VgBufferingModule } from 'videogular2/buffering';
@NgModule({
declarations: [
LiveEventVideo,
],
imports: [
IonicPageModule.forChild(LiveEventVideo),
VgCoreModule,
VgControlsModule,
VgOverlayPlayModule,
VgBufferingModule
],
providers: [],
})
export class LiveEventVideoModule { }