Video JS In Angular 9 - Live Video - 'Can't Resolve Videojs' Problem?

I am struggling to get the videojs to work in my angular 9 app. I have viewed all the exisitng stackoverflow posts, applied their solution, looked at different blog posts and githu

Solution 1:

I think the problem is your webpack.alias doesn't get affected. On the other hand, your webpack.config.js is not applied yet. Here is the solution for you:

• Install the following packages which give you capability to custom webpack:

npm i -D @angular-builders/custom-webpack @angular-builders/dev-server

• In angular.json file, then change the builder from @angular-devkit/build-angular:browser to @angular-builders/custom-webpack:browser and add the customWebpackConfig:

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      // path to your webpack config
      "path": "./webpack.config.js"
    }
  }
}

• Also in angular.json, replace value of build property from @angular-devkit/build-angular:dev-server to @angular-builders/custom-webpack:dev-server under serve block.

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
}

Regarding to your webpack.config.js, the minimal code to resolve problem is to set alias from video.js -> videojs since videojs-record requires module videojs:

module.exports = {
  resolve: {
    alias: {
      videojs: 'video.js'
    }
  },
}

That's it! Hopefully it would help to resolve your problem.