How to integrate rust wasm into angular 7 project? about wasm_game_of_life HOT 7 CLOSED

@marienz You should be able to workaround the Webpack loading issue by doing this.

I think it would be a good idea for us to include some documentation on how to use wasm-bindgen with Angular.

from wasm_game_of_life.

Got it to work in Angular 8 (without resorting to no-modules) by using @angular-builders/custom-webpack. The only thing I had to put in extra-webpack.config.js was module.exports = {'resolve': {'extensions': ['.wasm']}}; (I suspect if we get that added here it'll work out of the box).

One slight annoyance is that just importing the wasm-bindgen-generated module triggers a "WebAssembly module is included in initial chunk" error. I guess that's webpack/webpack#6615. Using import() to import the wasm-bindgen module (as suggested by the error message) does work. And I suspect if my import was in a lazily-loaded Angular module that'd also work around it, but I'm barely past "Hello World" in Angular... don't want to try breaking my app into modules before I've actually gotten it to work :)

(It also warns about the circular dependency between the wasm module and the generated js module, I think that's the same thing described on rustwasm/wasm-bindgen#32 and I'll just have to ignore it.)

from wasm_game_of_life.

Does angular use its own bundler or something? I'm not sure what is different about it compared to normal JS applications.

You can always use the web or no-modules target and include a <script> before the rest of your app, and use the wasm library from the global scope.

https://rustwasm.github.io/docs/wasm-bindgen/examples/without-a-bundler.html

from wasm_game_of_life.

@fitzgen Thank you, I have solved it by following your advice.

from wasm_game_of_life.

This is why it does not work with Angular out of the box:
rustwasm/wasm-bindgen#806

Altough I have no idea how to add this extension to the angular.json and using no-modules is not the best solution. 😞

from wasm_game_of_life.

angular/angular-cli#14987 was opened a few days ago for getting that extension added in Angular.

from wasm_game_of_life.

That's a trick I wouldn't have thought of, thanks!

from wasm_game_of_life.