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

Jest is having difficulty locating a module while working with Next.js, resulting in

Pattern matching to eliminate line breaks and tabs

Error message stating: rxjs and firebase encountered a TypeError when attempting to add property 0 because the object is not

Exploring the Behavior of Typescript Modules

Breaking down large reducer into smaller reducers

Nested REST API calls in Angular are causing only the inner call to be returned

The routing functionality in Angular4 encounters issues when the `router.navigate()` method is used within the callback of a

RxJS - Only emit if another source does not emit within a specified time frame

Navigating through nested objects using Rxjs

Error when using ES6 modules in ts-jest

Is it possible to utilize a variable for binding, incorporate it in a condition, and then return the variable, all while

Picture fails to load on Ionic app on the device

Sending properties of an element to a function within Angular version 4 or 5

Implementing Batch File Uploads using Typescript

Angular and Express are not communicating properly when attempting to make a GET request

Angular 2 form with ng2-bootstrap modal component reset functionality

Function input custom operator in RxJs

Is there a way to ensure my custom tslint rule is compatible with the exact version of the TypeScript module being used by tslint?

What causes TypeScript to narrow the type when a return statement is present, but not when it is absent?

What is the best way to connect a ref to a stateless component in React?