Error: The identifier HTMLVideoElement has not been declared

Question

Error: The identifier HTMLVideoElement has not been declared

Encountering an issue while attempting to build my Angular 9 Universal project for SSR:

/Users/my-project/dist/server.js:28676
        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", HTMLVideoElement)

ReferenceError: HTMLVideoElement is not defined

Utilizing the mat-video player in my project, which seems to be triggering the error. Any suggestions on how to resolve this?

Here's a snippet from my tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "module": "esnext",
    "resolveJsonModule": true,
  }
}

angular typescript angular-universal referenceerror

Answer 1

Answer №1

After a long week of troubleshooting, I finally managed to get it working!

I encountered the same issue:

HTMLVideoElement is not defined

Even though my environment was slightly different from what the original poster had, the solution remained consistent - avoid executing the HTMLVideoElement code.

In my case, I was using pixi.js with Angular Universal for Server Side Rendering (SSR).

To set up SSR in my Angular application, I followed the instructions provided at https://angular.io/guide/universal, by running

ng add @nguniversal/express-engine

.

The problem was resolved when I refrained from using the problematic pixi.js code:

PIXI.Texture.from('assets/image.png');

This particular call referred to HTMLVideoElement in the function signature, as outlined here:

To overcome this issue, I switched to utilizing PIXI.Loader() for loading textures instead:

this.loader = new PIXI.Loader()
this.texturesArray.forEach((texture: string) => this.loader.add(texture))
this.loader.onComplete.add(this.onTexturesLoaded)
this.loader.load()

By making this change, the problem vanished, and now my server starts without any hitches.

Additionally, I had to modify the "compilerOptions" in tsconfig.server.json by adding the property:

"module": "commonjs"

For those who are interested, here's the finalized version of my server.ts code:

(server.ts code snippet provided)

And for implementing mockCanvas, essential for working with PIXI, the function looks like this:

(mockCanvas function snippet provided)

Answer 2

After a long week of troubleshooting, I finally managed to get it working!

I encountered the same issue:

HTMLVideoElement is not defined

Even though my environment was slightly different from what the original poster had, the solution remained consistent - avoid executing the HTMLVideoElement code.

In my case, I was using pixi.js with Angular Universal for Server Side Rendering (SSR).

To set up SSR in my Angular application, I followed the instructions provided at https://angular.io/guide/universal, by running

ng add @nguniversal/express-engine

.

The problem was resolved when I refrained from using the problematic pixi.js code:

PIXI.Texture.from('assets/image.png');

This particular call referred to HTMLVideoElement in the function signature, as outlined here:

To overcome this issue, I switched to utilizing PIXI.Loader() for loading textures instead:

this.loader = new PIXI.Loader()
this.texturesArray.forEach((texture: string) => this.loader.add(texture))
this.loader.onComplete.add(this.onTexturesLoaded)
this.loader.load()

By making this change, the problem vanished, and now my server starts without any hitches.

Additionally, I had to modify the "compilerOptions" in tsconfig.server.json by adding the property:

"module": "commonjs"

For those who are interested, here's the finalized version of my server.ts code:

(server.ts code snippet provided)

And for implementing mockCanvas, essential for working with PIXI, the function looks like this:

(mockCanvas function snippet provided)

Error: The identifier HTMLVideoElement has not been declared

Answer №1

Similar questions

Injecting a component in Angular 2 using an HTML selector

Issues arising from an aging Angular project

What is the reason for observables not being subscribed to in NgRx effects?

Empty results in NgRx Parameterized Selector

The type '{ domain: string; parent: string; }' cannot be assigned to type 'string'. Error code: ts(2322)

Trouble communicating between Angular HttpClient POST request and Spring Controller

The issue of "Angular library throwing an error outside the specified 'rootDir' directory" arises while attempting to share dependencies

Exploring the Potential of Jest Testing for Angular 6 Services

How do you verify an OpenID Connect access token produced by Azure AD v2 in an ASP.NET Core web API?

The @angular/fire package is unable to locate the AngularFireModule and AngularFireDatabaseModule modules

Combining all code in Electron using Typescript

Incorporate a linked select dropdown into the registration form

Navigating through nested objects in a combined type

How do I incorporate global typings when adding type definitions to an npm module?

Moving SVG Module

Launching a nested route with a specific URL in Angular 5

"Pairing AngularJS 2 with Vaadin for a winning combination

Angular 2 Element Selection: Dealing with Unrendered Elements

Invalidating Angular Guards

Consolidate multiple generic items into a single entry