Module not found: Error: Can't resolve 'mat-video/app/video/video.component'

[Catopillar]

PLEASE FILL THIS OUT IF YOU WANT HELP WITH AN ISSUE!

Bug, feature request, or proposal:

mat-video/app/video/video.component does not seem to be loading.

ERROR in ./src/app/video-player/video-player.component.ts
Module not found: Error: Can't resolve 'mat-video/app/video/video.component' in 'F:\Source\Repos\EventPlayer\EventPlayer\ClientApp\src\app\video-player'
Failed to compile.

What is the current behavior?

I get the above error whenever I try to run.

What is the expected behavior?

I need to be able to listen to events on the mat video player and seek.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-mkrj9r

package.json

"dependencies": {
    "@angular/animations": "^8.0.2",
    "@angular/cdk": "8.0.1",
    "@angular/common": "8.0.2",
    "@angular/compiler": "8.0.2",
    "@angular/core": "8.0.2",
    "@angular/forms": "8.0.2",
    "@angular/material": "^8.0.1",
    "@angular/platform-browser": "8.0.2",
    "@angular/platform-browser-dynamic": "8.0.2",
    "@angular/platform-server": "8.0.2",
    "@angular/router": "8.0.2",
    "@aspnet/signalr": "^1.1.4",
    "@fortawesome/angular-fontawesome": "^0.4.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.19",
    "@fortawesome/free-solid-svg-icons": "^5.9.0",
    "@nguniversal/module-map-ngfactory-loader": "7.1.0",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.9",
    "hammerjs": "^2.0.8",
    "jquery": "3.3.1",
    "mat-video": "^2.7.2",
    "oidc-client": "^1.8.2",
    "popper.js": "^1.15.0",
    "rxjs": "^6.5.2",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { EventViewComponent } from './event-view/event-view.component';
import { MainPlayerComponent } from './main-player/main-player.component';
import { VideoPlayerComponent } from './video-player/video-player.component';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatIconModule } from '@angular/material/icon';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatVideoModule } from 'mat-video';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    EventViewComponent,
    MainPlayerComponent,
    VideoPlayerComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    BrowserAnimationsModule,
    MatVideoModule,
    HttpClientModule,
    CdkTreeModule,
    MatIconModule,
    FontAwesomeModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'event-view', component: EventViewComponent },
      { path: 'main-player', component: MainPlayerComponent },
      { path: 'video-player', component: VideoPlayerComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

video-player.component.ts

import { Component, Input, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';
import { MatVideoComponent } from 'mat-video/app/video/video.component';

export interface Video {
  Title: string;
  Source: string;
  Thumbnail?: string;
  StartTime?: number;
  PreviousVideo?: Video;
}

@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.css']
})

export class VideoPlayerComponent implements AfterViewInit{
  @Input() video: Video;

  @ViewChild('video', { static: false }) matVideo: MatVideoComponent;
  videoPlayer: HTMLVideoElement;

  constructor(private renderer: Renderer2) { }

  public seek(time: number) {
    this.videoPlayer.currentTime = time;
  }

  ngAfterViewInit(): void {
    this.videoPlayer = this.matVideo.getVideoTag();

    this.renderer.listen(this.videoPlayer, 'ended', () => console.log('video ended'));
  }
}

video-player.component.html <mat-video #video src="{{ video.Source }}"></mat-video>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Tried Angular 7 and 8 and had same issue

Is there anything else I should know?

I am pretty new to angular so I apologize if I have missed something obvious. I followed your installation instructions with no issue. I can play video and change source correctly. I am only having issues with MatVideoComponent.

[Catopillar]

I was able to work around this issue by replacing MatVideoComponent with "any"

@ViewChild('video', { static: false }) matVideo: any;

[jrcasso]

@Catopillar any definitely works just to get it to compile, but it'd be nice if we could specify the data type. I'm having the same issue; only difference is that mine is in a lazy-loaded module rather than AppModule.

[tons613]

I am also having same issue.

[marcosybarraa]

Same problem here...

[born2net]

same issue...

[nkoehler]

This is fixed in version 2.8.0.

Use:

import { MatVideoComponent } from 'mat-video/lib/video.component';

Closing.