Angular 13, webpack build failing

[dwassing]

Hello videojs-chromecast maintainers,

First and foremost, thanks for the help in the past and for your continued interest in this plugin.

I will submit this issue to Angular as well, as it is very unclear to me on which end this errors out on, but it is putting me between a rock and a hard place.

This week I upgraded my project from Angular 12.2.x to 13.x (13.1.0 currently), but this is for some reason causing my app to crash with the require('@silvermine/videojs-chromecast)(videojs) import. Specifically, the error and callstack I am getting looks like this on a dev build:

I have created a reduced test example, uploaded on stackblitz, here. The critical code may be found in the vjs-player.component.ts file, I have added some comments to make it as obvious as possible. Sadly, it is impossible to install @silvermine/videojs-chromecast on stackblitz for some reason, as it does not recognize the package as shown below: (try it, you will receive errors)

Therefore, to truly reproduce the error, one has to build the project locally and then install the plugin using npm. Once that is done, remove the comments from the code rows as described in vjs-player.component.ts.

I have looked at the changes in Angular 13 to try and find if anything breaks. So far, I have been unable to see anything that should be problematic for this plugin. The chromecast plugin is the only plugin I build using require, I have tried via various import methods, but get the same error.

Has anyone else had this issue with Angular 13 yet? It was released early November, so it is not exactly very old, but I like to stay up to date with common updates such as security updates etc.

Thank you for any help or insights into this. Regards, dwassing

[dwassing]

This is likely related to Angular CLI Issue 22159, but given the fact that this plugin supports strict mode, I do not see why it would fail upon building.

I am testing different ways to build the project, including having built custom .js and .css files via grunt. So far I have concluded:

• I can use some packages and a local <script> tag used in index.html and spawn a sample player with the chromecast plugin (using Angular 13), so that is definitely positive. (Used my example code from a previous issue here).
• I am however unable to get the chromecast plugin to work with my typescript files. It does not recognize chromecast as a plugin if I import the plugin using a <script> tag. I will see if I can do anything about that, will edit with results.

[kontrollanten]

class.extend package is removed in master, which should solve this. Can you try to rerun with latest master?

[dwassing]

Thank you @kontrollanten, to save me some time, I'm waiting to see if there's gonna be a new package release with your latest changes. As soon as I know more about that I will update and report back with results.

[yokuze]

We just published v1.3.4 with these changes. If it doesn't fix the issue, please comment here and we can reopen the issue.

[dwassing]

Thank you very much for the attention to this @yokuze, I do believe the issue is resolved with 1.3.4 but now I am unable to compile using webpack 5 (5.73.0). I believe this is related to SASS, because I get this loading error from webpack now:

This is probably worthy of a separate issue thread, but I felt like leaving a trace here for anyone that comes along the same road as I am.

Adding a webpack config with custom-webpack (for Angular, I won't bother you with that setup, but I know it works) like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(s*)css$/i,
        include: [
          path.resolve(__dirname, 'node_modules/@silvermine/videojs-chromecast/dist/'),
        ],
        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
      }
    ]
  },
};

Gives me a different error which I have been trying to fix for the past 3 days. Yes I have switched the loader-order around with no different results. More specifically it seems to dislike the import keyword and I have no idea why. So far google search has not helped me further. Webpack and loaders installed:

@kontrollanten Have you encountered this error seeing as you have been experimenting with webpack and SASS for a while? Any tips/suggestions would be very appreciated.

[kontrollanten]

@kontrollanten Have you encountered this error seeing as you have been experimenting with webpack and SASS for a while? Any tips/suggestions would be very appreciated.

I've a bit different setup (and not using Angular). I import the videojs-chromecast scss files from my own sass files;

@use "@silvermine/videojs-airplay/src/scss/videojs-airplay.scss"

And then in webpack I use;

 34       {
 35         test: /\.scss$/i,
 36         use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
 37       },

Using webpack 4.46.0.

Are you sure that you're targeting css files with your webpack rule? Or maybe you need to remove the "$" in your rule so that it will match the ?ngResource param?

[dwassing]

I am so confused. I disabled all the custom loaders and changed an import in the angular structure to see what would happen, and lo and behold, everything compiled. But the chromecast css is disabled (for now).

I am glad I had a backup sandbox project because I can definitely confirm that the original issue is resolved and custom webpack configs do not seem to be needed, it is a matter of how the stylesheets are imported into my Angular project. I seem to have a bunch of deprecated imports that I should have cleaned up a long time ago. This will be my next task it seems.

A sandbox project running the exact old Angular version (13.1.0) was able to run the chromecast plugin with the 1.3.4 version. I even updated to Angular 14 now and the sandbox project runs fine (with the chromecast CSS enabled), so the issue can remain closed and I will make sure to fix any other errors on my end.

Thank you @kontrollanten for updating to the ES6 standard and your reply, and to @yokuze for your time.