integrating into angular 9 project

[hansdpf]

I tried to include it in my angular 9 project (ngx install wasmoon) but unfortunately I get error messages: ERROR in ./node_modules/wasmoon/dist/index.js Module not found: Error: Can't resolve 'child_process' in 'C:\projekte\test\node_modules\wasmoon\dist'.

ERROR in ./node_modules/wasmoon/dist/index.js Module not found: Error: Can't resolve 'fs' in 'C:\projekte\test\node_modules\wasmoon\dist'.

ERROR in ./node_modules/wasmoon/dist/index.js Module not found: Error: Can't resolve 'path' in 'C:\projekte\test\node_modules\wasmoon\dist'.

Any idea - how to fix the errors?

[ceifa]

These errors happens because wasmoon tries to safely import those packages and the bundler is not prepared to that since it tries to statically resolve everything on build time.

To solve add just add the section browser to your package.json:

"browser": {
    "child_process": false,
    "fs": false,
    "path": false,
    "crypto": false,
    "url": false
},

Please let me know if you have any other problems.

[hansdpf]

Thanks for the quick reply. But unfortunately I had no success with it. I have also searched for alternative solutions and tried them but the errors persist.

[ceifa]

Can you show your package.json?

[hansdpf]

I reduced it a little and this is for angular 10 but I also tested it for angular 9. package.json:

{
  "name": "LuaTest",
  "main": "dist/index.js",

  "scripts": {
    "postinstall": "ngcc",
    "ng": "ng",
    "int:extract": "ng xi18n --output-path i18n",
    "init-proxy": "cp -n proxy.conf.json.template proxy.conf.json",
    "start": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0 --port 4200",
    "build": "node --max_old_space_size=5096 node_modules/@angular/cli/bin/ng build --prod",
    "update:i18n": "ng xi18n --outputPath=../src/i18n",
    "extract-i18n": "ng xi18n --ivy --format xlf --output-path src/i18n   && ng run ng:xliffmerge",
    "build:all": "npm run build --localize",
    "analyze": "ng build --stats-json && webpack-bundle-analyzer -m static -O -r reports/normal-bundle-sizes.html dist/stats.json && ng build --prod --stats-json && webpack-bundle-analyzer -m static -O -r reports/webpacked-bundel-sices.html dist/en/stats.json ",
    "test": "ng test",
    "local-lint": "tslint -p ./",
    "lint": "tslint --force -o ./lint-result.xml -t checkstyle -p ./",
    "e2e": "ng e2e",
    "compodoc": "compodoc -p tsconfig.json"
  },
  "dependencies": {
    "@angular/animations": "10.1.5",
    "@angular/common": "^10.1.5",
    "@angular/compiler": "^10.1.5",
    "@angular/core": "^10.1.5",
    "@angular/forms": "^10.1.5",
    "@angular/localize": "~10.1.5",
    "@angular/platform-browser": "^10.1.5",
    "@angular/platform-browser-dynamic": "^10.1.5",
    "@angular/router": "^10.1.5",
    "@coreui/angular": "^2.7.0",
    "@coreui/coreui-pro": "^2.1.16",
    "@fortawesome/fontawesome-free": "^5.11.2",
    "@ng-bootstrap/ng-bootstrap": "^4.2.2",
    "@ngrx/effects": "^8.5.2",
    "@ngrx/store": "^8.5.2",
    "@ngrx/store-devtools": "^8.5.2",
    "@ngx-i18nsupport/tooling": "^8.0.3",
    "acorn": "^6.2.1",
    "angular-9-datatable": "^0.1.1",
    "angular2-toaster": "^7.0.0",
    "brace": "^0.11.1",
    "chart.js": "^2.9.3",
    "chartjs-plugin-datalabels": "^0.7.0",
    "core-js": "^2.6.10",
    "file-saver": "^2.0.2",
    "hash.js": "^1.1.7",
    "jquery": "3.4.0",
    "jsonpath": "^1.0.2",
    "jszip": "3.2.0",
    "jwt-decode": "^3.0.0",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "ng-select": "^1.0.2",
    "ng2-charts": "^2.3.0",
    "ng2-file-upload": "^1.4.0",
    "ngx-ace-wrapper": "9.0.1",
    "ngx-bootstrap": "^5.2.0",
    "ngx-device-detector": "^1.3.19",
    "ngx-pagination": "^3.3.1",
    "ngx-perfect-scrollbar": "^8.0.0",
    "npm": "^6.13.1",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.3",
    "rxjs-compat": "^6.5.3",
    "simple-line-icons": "^2.4.1",
    "stream": "0.0.2",
    "tslib": "^2.0.0",
    "wasmoon": "^1.1.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.6",
    "@angular-devkit/build-ng-packagr": "~0.1001.6",
    "@angular/cli": "10.1.6",
    "@angular/compiler-cli": "^10.1.5",
    "@angular/language-service": "10.1.5",
    "@compodoc/compodoc": "^1.1.11",
    "@ngrx/schematics": "^8.5.2",
    "@ngx-i18nsupport/ngx-i18nsupport-lib": "^1.12.1",
    "@types/jasmine": "3.3.13",
    "@types/jasminewd2": "2.0.6",
    "@types/jquery": "^3.3.34",
    "@types/jsonpath": "^0.2.0",
    "@types/jszip": "3.1.5",
    "@types/jwt-decode": "^2.2.1",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.5.12",
    "@types/node": "^12.11.1",
    "@types/uuid": "^3.4.6",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ng-packagr": "^10.1.0",
    "protractor": "~7.0.0",
    "ts-node": "8.3.0",
    "tsickle": "0.39.1",
    "tslint": "~6.1.0",
    "typescript": "4.0.3",
    "webpack-bundle-analyzer": "^3.9.0"
  },
  "engines": {
    "node": ">= 8.9.4",
    "npm": ">= 6.9.0"
  },
  "browser": {
    "child_process": false,
    "fs": false,
    "os": false,
    "path": false,
    "crypto": false
  }
}

[ceifa]

I created a project with ng new my-app, installed wasmoon and got the error. Then I changed the package.json and did the ng serve --open, it's working fine.

[hansdpf]

It does not work directly with my package.json; so I will also try it with a new project and change the parameters.

Thanks and happy new year

[hansdpf]

With a simple project I could also generate it, however I tried the API usage (Readme.md) and got error messages.

I want to enter Lua code in the browser and check for errors (compile in a Lua VM) and output in an output component - is wasmoon suitable for this?

Did you test it (API usage from Readme.md) in the browser?

My test:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-test',
  templateUrl: './my-test.component.html',
  styleUrls: ['./my-test.component.css']
})
export class MyTestComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    console.log (' my test x');
    this.executeLua();
  }
  async executeLua() {
    const { LuaFactory } = require('wasmoon');

    const lua = await new LuaFactory().createEngine();

    try {
      lua.global.set('sum', (x, y) => x + y);
      lua.doString(`
    print(sum(10, 10))
    function multiply(x, y)
        return x * y
    end
    `);
      const multiply = lua.global.get('multiply');
      console.log(multiply(10, 10));
    } finally {
      lua.global.close();
    }

    console.log(lua);

  }
}

I get these messages:

zone-evergreen.js:1068 GET http://localhost:4200/glue.wasm 404 (Not Found) index.js:323 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': HTTP status code is not ok ....

Is the implementation wrong - did I forget something?

[ceifa]

@hansdpf You will have to find a way to serve the wasm file as a static file. I really don't know how to deal this with angular, but fyi I did with plain webpack in try-lua: https://github.com/ceifa/try-lua

[hansdpf]

successfully integrated