How to integrate rust wasm into angular 7 project?

[mokeyish]

Summary

How to integrate rust wasm into angular 7 project?

Additional Details

Angular 7 use webpack for packing, but it cannot recognize *.wasm file, I have tried to integrate rust wasm into angular 7 for a few days, but I still can't solve it, Could you provide an angular example project with call method of rust wasm?

[fitzgen]

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

[mokeyish]

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

[suyoshi]

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. 😞

[marienz]

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.)

[marienz]

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

[Pauan]

@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.

[marienz]

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