包装WASM文件中的Angular自定义元素捆绑包

Question

我正在使用使用WASM库的Angular V14创建一个自定义元素捆绑包（my-Elements.js）。我想在网络服务器上托管此捆绑包，并将其作为任何人都可以使用的库。

作为测试，我在localhost上托管了一个index.html，该链接链接到 https：// https：/// my-webserver.com/my-elements.js 。元素捆绑包可以正确下载，但随后它试图从Localhost下载WASM文件，而不是从my-webserver.com下载。

我尝试设置WebPack将所有角构建JS文件与WASM库将所有Angular Build JS文件捆绑到一个文件中，但我无法使其工作。浏览器下载my-elements.js，但甚至没有尝试下载WASM文件。

这是我的webpack配置：

const path = require("path");

module.exports = {
    mode: "production",
    entry: "./dist/custom-elements/main.js",
    output: {
        filename: "custom-elements.js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /\.wasm$/,
                use: ["wasm-loader"]
            }
        ]
    }
};

我还尝试遵循本指南，使用webpack自定义我的角构建： https://developer.okta.com/blog/2019/12/09/angular-webpack 。 这是我的自定义 - webpack-config：

module.exports = {
    "module": {
        "rules": [
            {
                "test": /\.wasm$/,
                "use": ["wasm-loader"]
            }
        ]
    }
};

但这给了我一些看似无关的错误消息：

[error] Error: NOT SUPPORTED: keyword "id", use "$id" for schema ID
    at Object.code (/home/user/custom-elements/node_modules/ajv/dist/vocabularies/core/id.js:6:15)

如何使它工作？

Answer 1

我找到了一个有效的肮脏解决方案，但我不喜欢它。

我正在使用ng build-Output-hashing = none来构建我的项目。

然后，我在dist/runtime.js中找到了WASM库的位置：

c = fetch（S.P+“”+A+“+”。module.wasm”）

i手动以我的网站的域前缀：

c = fetch（“ https://my-webserver.com/” + s.p+“”+a+“。模块

。
cat Dist/custom-Elements/*。JS | gzip＆gt; test/elements.js.gz

这必须这样做，直到找到更好的解决方案为止。