找不到模块“./single-media-player”

Question

我需要在我的 Ionic 3 应用程序中集成 videogular2。所以我做了这些事情：

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

我的页面模块：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 { }

此处显示此错误[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:

   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

Answer 1

在 Ionic 4 更新之后，他们更新了 Ionic 的所有原生插件，因此如果您想使用该插件，请尝试安装旧版本。！

Answer 2

这是他们的内部组件。与 videogular2 核心模块无关。

这工作正常。

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 { }

找不到模块“./single-media-player”

Cannot find module './single-media-player'

typescript

videogular

ionic3

angular