Angular4使用Videogular2插件报错：无法绑定'vgHls'属性

这个问题我帮开发者排查过好多次啦！出现Can't bind to 'vgHls' since it isn't a known property of 'video'错误的核心原因很明确：你没有在Angular模块中导入Videogular2专门处理HLS流的模块，导致Angular完全不知道vgHls这个指令是什么。

下面是一步步的解决方法：

1. 确保依赖安装正确（如果还没装的话） #

首先确认你已经安装了Videogular2和HLS流必需的hls.js依赖，打开终端执行：

npm install videogular2 hls.js --save

（因为你用的是Angular4，对应的Videogular版本是videogular2，不是后来适配Angular+的@videogular/ngx-videogular哦）

2. 修正AppModule，导入必要的Videogular模块 #

你原来的app.module.ts只定义了组件类，缺少Angular模块的核心结构（@NgModule装饰器），而且完全没导入Videogular的核心模块、控制模块和HLS模块。修改后的代码应该是这样：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入Videogular的核心模块、控制模块和HLS模块
import { VgCoreModule } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgHlsModule } from 'videogular2/hls';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    VgCoreModule, // 必须导入，vg-player的核心依赖
    VgControlsModule, // 如果你需要播放控制栏功能的话
    VgHlsModule // 关键！导入这个才能让Angular识别vgHls指令
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 调整模板中video标签的MIME类型 #

HLS流（.m3u8文件）对应的标准MIME类型是application/x-mpegURL，不是video/mp4，所以修改你的app.component.html：

<vg-player>
  <video #myMedia 
         [vgHls]="'http://static.videogular.com/assets/videos/videogular.m3u8'" 
         (onGetBitrates)="hlsBitrates = $event" 
         id="my-video" 
         type="application/x-mpegURL" 
         controls>
  </video>
</vg-player>

做完这三步，重启你的Angular项目，这个模板解析错误应该就消失了，HLS视频流也能正常播放啦！

内容的提问来源于stack exchange，提问作者nanaBai