Angular Elements的构建错误

问题描述

我有一个带有延迟加载模块的angular 9应用程序。 我想将整个带有Angular Elements的应用程序导出到一个文件中，以将其插入没有其他Web组件的标准HTML页面中。 （我想避免使用iframe解决方案。）

这就是我所做的：

我修改了app.module.ts，将 AppComponent 声明为 entryComponents

entryComponents: [AppComponent]

在AppModule的构造函数中，我这样写：

constructor(private injector: Injector) {
        const myElement = createCustomElement(AppComponent,{ injector: this.injector });
        customElements.define('app-element',myElement);
    }

我启用了polyfill.ts

@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js

最后，在package.json中，我创建了一个任务来进行构建，以将所有内容都包含在一个文件中，如下所示：

"el-build": "npm run --aot el-build-task && npm run el-package-task","el-build-task": "ng build appname -c=beta --output-hashing=none","el-package-task": "cat ./dist/appname/{main-es5,main-es2015,polyfills-es5,polyfills-es2015,runtime-es5,runtime-es2015}.js > ./dist/appname.js"

当我运行 npm run el-build 时，一切正常，并且我获得了单个文件。

一旦我将其导入HTML页面，就会出现此错误：

Uncaught SyntaxError: Unexpected token ':'

即使更改捆绑的文件（main-es5，polyfills ...），也会发生错误。它从未处于同一位置，但似乎webpack会用此错误进行构建。

我什至按照https://stackoverflow.com/a/60192617/6616124的建议将es5和es2015中的捆绑包分开，但出现相同的错误。

如前所述，我有20个延迟加载的模块，它们生成尽可能多的.js文件。我也尝试将它们导入捆绑包中，但是会发生相同的错误。

我试图用一个简单的基本应用程序来完成这些工作，并且效果很好。

因此，我不知道它是否取决于某些Webpack的设置（我对Webpack完全不了解）还是整个应用程序具有太多模块或其他我忽略的事实。

有什么建议吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）