Closed Sampath-Lokuge closed 5 years ago
Hi
I need to integrate videogular2 on my Ionic 3 app. So I have done these things:
videogular2
Ionic 3
npm install videogular2@6.1.1 --save npm install @types/core-js --save-dev
My page module: live-event-video.module.ts
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?
[ts] Cannot find module './single-media-player'. [2307]
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
https://stackoverflow.com/a/54370186/1077309
Hi
I need to integrate
videogular2
on myIonic 3
app. So I have done these things:My page module:
live-event-video.module.ts
Here it shows this error
[ts] Cannot find module './single-media-player'. [2307]
Any clue?html
ionic info