IVS player for Angular

Question

Hi  
I am trying to use the npm version of the amazon-ivs-player with Angular.  
  
It seems to have been designed for use with webpack.. but I am stuck with the angular-cli.  
  
I am following this example:  
https://github.com/aws-samples/amazon-ivs-player-web-sample/blob/master/samples/npm-sdk/npm-sdk.ts  
  
Angular-cli does not seem to like the two import statement for the wasm files:  
import wasmBinaryPath from 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm'  
import wasmWorkerPath from 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.js';  
  
I get these errors when trying to compile the application:  
ERROR in ./src/app/components/player2/video-player.component.ts 48:43-57  
"export 'default' (imported as 'wasmBinaryPath') was not found in 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm'  
ERROR in ./node_modules/amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm  
Module not found: Error: Can't resolve 'a' in 'C:\Users\james\OneDrive\Documents\gitprojects\doghouse-demo\ui
ode_modules\amazon-ivs-player\dist\assets'    
ERROR in ./node_modules/amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm  
WebAssembly module is included in initial chunk.  
This is not allowed, because WebAssembly download and compilation must happen asynchronous.  
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:  
* multi (webpack)-dev-server/client?http://0.0.0.0:0/sockjs-node&sockPath=/sockjs-node ./src/main.ts --> ./src/main.ts --> ./src/app/app.module.ts --> ./src/app/components/player2/video-player.component.ts --> ./node_modules/amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm  
  
Is there anyone that could shed any light on this?  
  
Maybe there is another way to use wasm with the Angular framework?  
  
If I cant use npm then maybe I have to use the script tags but then I dont think I can interact with the Angular code in the application.  
  
Kind regards  
J

Answer

Hello,  
  
Adding on to what Riley mentioned, this GitHub issue on our web samples repo seems to describe a similar problem and may have more tips: https://github.com/aws-samples/amazon-ivs-player-web-sample/issues/4.  
  
I'm not familiar with angular-cli, but perhaps you could use this library to specify an additional webpack configuration that'd let you copy the player's assets without recompilation? https://github.com/just-jeb/angular-builders  
  
Best,  
Tony

Answer

Developers packaging the IVS player into an app are required to resolve and import the following assets via URL:  
  
 * ‘amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm’  
 * ‘amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.js’;  
  
These assets must not be re-compiled during packaging. Your build tool must ignore these wasm files.  
  
A sample of webpack config can be found: https://github.com/aws-samples/amazon-ivs-player-web-sample/blob/master/webpack.config.js , however, other packagers could have their own way of ignoring certain files from being re-compiled.

IVS player for Angular

Relevant content