Module './single-media-player' could not be located

Looking to incorporate videogular2 into my Ionic 3 application. Here are the steps I've taken so far:

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87f1eee3e2e8e0f2ebe6f5b5c7b1a9b6a9b6">[email protected]</a> --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';
{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 { }

Encountering this error message: 

[ts] Cannot find module './single-media-player'. [2307]
. Any insights?

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

(preformatted code section with package dependencies)

Ionic info

(preformatted code section with Ionic and Cordova version details)
angulartypescriptionic3videogular

Answer №1

Following the Ionic 4 update, all Native Plugins have been updated as well. If you wish to utilize a specific plugin, consider installing an older version to ensure compatibility!

Answer №2

They discovered that the issue stemmed from an internal component, completely unrelated to the core modules of videogular2.

All seems to be functioning properly now.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hidden input fields do not get populated by Angular submit prior to submission

I am in the process of implementing a login feature in Angular that supports multiple providers. However, I have encountered an issue with submitting the form as the loginProvider value is not being sent to the server. Below is the structure of my form: &l ...

javascripthtmlangulartypescript

A guide to accessing the value of a web.config appsetting key in a Type Script service class

I am currently working on an Angular 2 application in Visual Studio 2015. In my project, I need to retrieve the app setting value from web.config in a TypeScript file (service.ts). Despite searching online and reading various resources, I have not been ab ...

visual-studioangulartypescript

Utilizing Angular 4 Dropdowns: A Practical Demonstration

I was looking for a way to incorporate a drop-down text into one of my form elements, and I stumbled upon this resource: ng4-material-dropdown However, the instructions on how to use it are not very clear from the provided example: The example code snipp ...

angulardrop-down-menu

Typescript: Utilizing method overloading techniques

I'm in the process of implementing function overloads that look like this: public groupBy(e: Expression<any>): T { e = this.convert(e, Role.GROUP_BY); this.metadata.addGroupBy(e); return this.self; } public grou ...

typescript

The synchronization between Typescript and the HTML view breaks down

I am currently working on an application that retrieves user event posts from MongoDB and displays them in HTML. In the Event-post.ts file, inside the ngOnInit() function, I have written code to retrieve the posts using the postsService.getPosts() method. ...

htmlangulartypescript

How can I make angular material data table cells expand to the full width of content that is set to nowrap?

This example demonstrates how the mat-cells are styled with a specific width: .mat-cell { white-space: nowrap; min-width: 150rem; } If the width is not specified, the table will cut off the text due to the white-space property being set to nowrap. Is ...

htmlcssangularangular-material

The integration of Meteor Angular2 with Mongodb underwent significant external modifications

I have been experimenting with a basic Meteor Angular 2 application that simply reads from a database. I also have another app that interacts with the same database. However, whenever there is a change in the database, I encounter an error in my Meteor app ...

mongodbmeteorangularangular2-meteor

Converting Dates to Strings and Validating Arrays in Nest.js DTOs

Whenever I send a JavaScript Date() object through a put request to my Nest backend, I expect the date format to remain unchanged. However, it gets passed as a string, making it quite challenging to manage. I attempted using DTOs, but encountered an issue ...

arraystypescriptdatetimenestjsdto

Is it considered a poor practice to self-instantiate within a static method of a JavaScript class

Do you think this object-oriented JavaScript (TypeScript) code is not well-written? class KYC { public reference; public data = null; constructor(id: string) { this.reference = id ? firestoreAdmin.collection('kyc').doc(id) : fi ...

javascripttypescriptexpress

Is Angular9 BehaviorSubject from rxjs giving trouble across different components?

I am facing an issue with updating data in real-time from the profile component to the header component. Initially, it works fine but after updating any value in the profile component, the header observable does not subscribe again. To solve this problem, ...

angularrxjsbehaviorsubjectangular2-changedetection

Strict mode does not permit the use of octal literals

I am currently working with Angular 2. When I incorporate this code in my SCSS file, everything runs smoothly. .text::after { content: "\00a0\00a0"; } However, if I move it to the styles: [``] I encounter the error: Uncaught SyntaxErro ...

javascriptcssangular

Angular Inner Class

As a newcomer to Angular, I have a question about creating nested classes in Angular similar to the .NET class structure. public class BaseResponse<T> { public T Data { get; set; } public int StatusCo ...

javascript.netangulartypescriptclass

Is it possible to pass a number instead of a string to Angular's matToolTip within a mat-icon-button? If not, is there a way to convert the number to a string within an Angular

In my current situation, I am facing a challenge with the following line of code: [matTooltip]="ratingId + 1". This line is crucial as it forms part of the arguments for a Material Design button. However, in this case, things are not straightfo ...

angulartypescript

Is the Angular CLI proxy configuration failing to work properly?

Working on Angular CLI (ng4) and facing an issue with the proxy configuration for a rest api call outside the application. While running ng build --prod --aot=true, I encounter a 404 status code. However, it works fine in development mode. How can I resol ...

angular

What purpose does @ViewChild serve if we are unable to modify or interact with its properties from the Parent Component?

I have two main components - home and about. Within both of these, I am including a third component called hearts. Currently, I am manipulating the value of the 'age' property in the hearts component (initially set to '23') using @ViewC ...

javascriptangularcomponentsangular-directiveviewchild

Choosing a value type within an interface or object declaration

Is it possible to extract a nested type object from an interface or parent type? interface IFake { button: { height: { dense: number; standard: number; }; }; otherStuff: string; } type Button = Pick<IFake, 'button'& ...

typescript

Is there a way to program a function that can automatically trigger or refresh an HTTP POST method?

How can I create a method in a distant component that will run a POST request when a button is clicked? I believe I need to use a service in this situation. It's not necessary for it(this.qwe) to be in the constructor, it's just an example... ...

angularrxjsrxjs-observables

Exploring Uppercase and Lowercase Filtering in NGXS for Angular Developers

I am encountering a problem with filtering and searching, specifically in matching the exact lowercase or uppercase of the string. Is there a way to search or filter regardless of the case sensitivity? For more information, please visit this link CLICK H ...

angularangular6angular-reactive-formsngxs

Executing JavaScript functions externally from the Angular 6 application

I have a unique scenario where my angular 6 app is embedded within another application that injects JavaScript to the browser to expose specific functionalities to the angular app. For example, when running my angular app within this external application, ...

javascriptangular

The Unhandled Promise Rejection Warning in mocha and ts-node is due to a TypeError that arises when attempting to convert undefined or null values

I've been encountering issues while setting up ts-node with mocha, as the test script consistently fails. I attempted to run the following commands: mocha --require ts-node/register --extensions ts,tsx --watch --watch-files src 'src/**/*.spec.{ ...

typescriptmocha.jsts-node