emscripten-core / emscripten-core/emscripten

Can't use EXPORT_ES6 with basic Angular app

Open
#20,624 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
C++
Stars
27.6k
Forks
3.6k
Avg merge
1d 1h
Merged PRs (30d)
105

Description

Please include the following in your bug report:

**Version of emscripten/emsdk:**
3.1.47

**Failing command line in full:**

When this script is run with `--use-es6`, it seems to require `file://` urls which it fails to fetch. The `file://` urls should probably not be used:

```
#!/bin/sh

set -e
set -v

ng new myApp --routing --style=scss

cd myApp

sed -i 's#"src/assets"#"src/assets",\n {"glob": "**/*.wasm", "input": "src/app", "output": "/"},#' angular.json

sed -i "/'@angular\/core';/a\
import MyWrapperModule from './myWrapperModule.js';" src/app/app.component.ts

sed -i '/title = /a\
constructor()\
{\
console.log("INVOKED CTOR");\
MyWrapperModule().then(module => {\
console.log("GOT MODULE");\
});\
}' src/app/app.component.ts

sed -i '/noImplicitReturns/a "noImplicitAny": false,' tsconfig.json

cd ..

cat << EOF > mywrapper.cpp

#include
#include
#include

class MyWrapper
{
public:
explicit MyWrapper();
~MyWrapper();

int getNum();
};

#include

#include

int main(int argc, char** argv)
{
return 0;
}

MyWrapper::MyWrapper()
{
}

MyWrapper::~MyWrapper()
{
}

int MyWrapper::getNum()
{
return 42;
}

// clang-format off
EMSCRIPTEN_BINDINGS(my_wrapper)
{
emscripten::class_("MyWrapper")
.constructor()
.function("getNum", &MyWrapper::getNum)
;
}
// clang-format on
EOF

if [ "$1" = "--use-es6" ]
then
ES6_ARG=-sEXPORT_ES6=1
else
ES6_ARG=
fi

em++ -O2 -g -o mywrapper.cpp.o -c mywrapper.cpp
em++ -O2 -g -sWASM=1 $ES6_ARG \
-sMODULARIZE=1 -sEXPORT_NAME=MyWrapperModule \
--minify=0 --bind \
-sENVIRONMENT=web mywrapper.cpp.o -o myWrapperModule.js

if [ "$1" = "--use-es6" ]
then
sed -i 's#wasmBinaryFile = new URL(#console.log("import.meta.url", import.meta.url);\n wasmBinaryFile = new URL(#' myWrapperModule.js
fi

mv myWrapperModule.js myWrapperModule.wasm myApp/src/app

cd myApp
ng build
ng serve
```

The failure is

```
INVOKED CTOR
myWrapperModule.js:424 import.meta.url file:/// ... /myWrapperModule.js
zone.js:1498 Not allowed to load local resource: file:/// ... /myWrapperModule.wasm
(anonymous) @ zone.js:1498
Show 1 more frame
Show less
core.mjs:26656 Angular is running in development mode.
core.mjs:10614 ERROR Error: Uncaught (in promise): TypeError: Failed to fetch
TypeError: Failed to fetch
at zone.js:1498:36
at proto. (zone.js:962:24)
at instantiateAsync (myWrapperModule.js:478:12)
at createWasm (myWrapperModule.js:559:3)
at myWrapperModule.js:2691:19
at new AppComponent (app.component.ts:14:20)
at NodeInjectorFactory.AppComponent_Factory [as factory] (app.component.ts:17:4)
at getNodeInjectable (core.mjs:4862:44)
at createRootComponent (core.mjs:14273:35)
at ComponentFactory.create (core.mjs:14137:25)
at resolvePromise (zone.js:1193:31)
at resolvePromise (zone.js:1147:17)
at zone.js:1260:17
at _ZoneDelegate.invokeTask (zone.js:402:31)
at core.mjs:10757:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10757:36)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Object.onInvokeTask (core.mjs:11070:33)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Zone.runTask (zone.js:173:47)
handleError @ core.mjs:10614
Show 1 more frame
Show less
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.