Use MUX Player (Video) in Angular 14/15

Mux is a video API service that has its own player: MUX Player

I am wanting to use this npm package in Angular 14/15 by importing it into a specific component only. The js should only be loaded when this component is loaded.

Import

The two methods of using the service are:

1. via a direct <script src="https://unpkg.com/@mux/mux-player"></script> import in the HTML (which I can do in angular's index.html file. This does however mean that the script is loaded for everyone, which is not what I want.
2. npm Package @mux/mux-player

Usage

Add the code to a component's HTML where the script or npm package has been imported.

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

Making sure to also include schemas: [CUSTOM_ELEMENTS_SCHEMA] in the module (or standalone component).

Problem

Angular can be a bit weird about untyped packages. I think that this package uses typescript, but in any case, importing the npm package gives me plenty of errors. Essentially, it's not being loaded because Angular is tree-shaking it out when I am not using the imported class in the components' ts. This means that on load, I am seeing:
Cannot find module '../../../types/mux' or its corresponding type declarations and Property 'error' in type 'MuxVideoElement' is not assignable to the same property in base type 'CustomVideoElement<HTMLVideoElement>'.
Type 'MediaError' is missing the following properties from type 'MediaError': MEDIA_ERR_ABORTED, MEDIA_ERR_DECODE, MEDIA_ERR_NETWORK, MEDIA_ERR_SRC_NOT_SUPPORTED

What I've tried

1. To confirm that the <script> import and HTML code work together, I imported the script into the index.html, and this removed all errors and the player loaded fine.

2. I have tried importing the npm package import MuxPlayerElement from "@mux/mux-player";, and added declare module "@mux/mux-player"; to the typings.d.ts.

3. Import the package into the component, and tried to declare the @ViewChild template ref as a MuxPlayerElement, to get around any tree-shaking.

There is an Angular demo where it says "This player? It's an open book." at https://www.mux.com/player, however, this results in the error Only void and foreign elements can be self closed "mux-player". Easy solution to this is to close the tag with </mux-player> rather than .../>

Update!

Mux addressed angular support in 1.9.0

https://docs.mux.com/guides/player/releases#190

Instructions for usage:

1. npm install @mux/mux-player
2. add schemas: [CUSTOM_ELEMENTS_SCHEMA] to module (or standalone component)
3. add import "@mux/mux-player" to the target component imports
4. Use as documented <mux-player ...></mux-player>

🎉