如何在Angular 14/15中按需引入并使用MUX Player？

需求 #

仅在指定Angular组件中加载@mux/mux-player的npm包，实现JS按需加载，避免全局引入脚本。

核心问题 #

• Angular摇树优化会移除未在组件代码中实际使用的导入模块，导致播放器无法初始化
• 包的类型定义存在冲突，触发Property 'error' in type 'MuxVideoElement' is not assignable to the same property in base type错误
• 官方演示的自闭合标签<mux-player/>不符合Angular模板规范，会报Only void and foreign elements can be self closed错误

分步解决方案 #

1. 安装依赖 #

npm install @mux/mux-player

2. 配置自定义元素Schema #

在目标组件所属的NgModule（或独立组件元数据）中添加CUSTOM_ELEMENTS_SCHEMA，允许Angular识别自定义元素：

// 模块中配置
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  // ...其他元数据
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class YourModule {}

// 独立组件中配置
@Component({
  // ...其他元数据
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MuxPlayerComponent {}

3. 按需导入并规避摇树优化 #

在目标组件的.ts文件中导入播放器，并通过实际引用导入的类避免Angular摇树优化移除模块：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import MuxPlayerElement from '@mux/mux-player';

@Component({
  selector: 'app-mux-player',
  templateUrl: './mux-player.component.html'
})
export class MuxPlayerComponent implements AfterViewInit {
  // 通过ViewChild获取模板引用，指定类型为MuxPlayerElement
  @ViewChild('muxPlayer') muxPlayer!: ElementRef<MuxPlayerElement>;

  ngAfterViewInit(): void {
    // 对播放器实例做简单操作，进一步确保导入不会被摇掉
    console.log(this.muxPlayer.nativeElement);
  }
}

4. 修复类型错误 #

针对MediaError类型冲突问题，在项目根目录的typings.d.ts中添加兼容的类型声明：

declare module '@mux/mux-player' {
  import type { CustomVideoElement } from '@mux/mux-player/src/base';
  interface MuxVideoElement extends CustomVideoElement<HTMLVideoElement> {
    error: MediaError | null;
  }
  const MuxPlayerElement: {
    new (): MuxVideoElement;
  };
  export default MuxPlayerElement;
}

如果不想处理类型，也可以暂时用any类型替代：

@ViewChild('muxPlayer') muxPlayer!: ElementRef<any>;

5. 模板正确写法 #

将自闭合标签改为成对标签，避免Angular模板报错：

<mux-player #muxPlayer
  stream-type="on-demand"
  playback-id="FuJSYrK0014ec2LPnm11bzC2MAySAQPqA"
  metadata-video-title="Tea and Cookies"
  metadata-user-id="user-24601"
></mux-player>

额外验证 #

若以上步骤仍有问题，可先在index.html中全局引入脚本验证播放器功能正常，再排查按需加载的配置问题：

<script src="https://unpkg.com/@mux/mux-player"></script>

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