集成web组件在角6中使用错误的基-href
集成web组件在角6中使用错误的基-href
提问于 2018-07-06 19:29:20
我刚刚用Range6创建了我的第一个web组件。一切都很好，直到我尝试将web组件集成到一个现有的应用程序中：
集成web组件(https://www.example.com)的应用程序：
<script type="text/javascript" src="https://component.example.com/html-imports.min.js"></script>
<link rel="import" href="https://component.example.com/element.html">
<my-web-component uuid="2342-asdf-2342-ffsk"></my-web-component>我的web组件index.html不包含基-href。
浏览器现在尝试加载web组件的资产：
https://www.example.com/assets/i18n/de_CH.json相反，
https://component.example.com/assets/i18n/de_CH.json当我试图在构建过程中添加基-href时，结果是：
ng build --configuration=development --base-href https://component.example.com/
Cannot read property 'startTag' of null
TypeError: Cannot read property 'startTag' of null
at IndexHtmlWebpackPlugin.<anonymous> (/home/www-data/.../node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/index-html-webpack-plugin.js:147:62)
at Generator.next (<anonymous>)
at fulfilled (/home/www-data/.../node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/index-html-webpack-plugin.js:4:58)任何帮助都是非常感谢的，我的想法快用完了。
回答 3
Stack Overflow用户
发布于 2018-07-10 10:27:36
先给几个提示：
- 正如Skorunka建议的那样，您应该构造已经在
<base>中的<head>，因为它们都共享相同的起始URL。而且，在这种情况下使用相对URL和绝对URL是没有意义的。 --base-href配置甚至可以覆盖HTML中的配置，所以不要担心。- 在
type标签中定义script，它肯定不是Javascript，也没有必要。 - 最后看：
回到问题上，你能告诉我你的组件源代码吗？问题可能在于您在组件中加载文件的方式，而不是导入组件的方式，也不是这里的代码。
Stack Overflow用户
发布于 2018-07-12 07:21:50
Stack Overflow用户
发布于 2018-07-16 11:56:18
上述任何一个答案对我来说都是正确的，所以我在贴出解决问题的方法。我完全停止使用基地-href了。对于所有资产，我使用其他方式加载它们：
- 对脚本或图像使用绝对URL (可以与域-url环境变量一起使用)。如果不这样做，web组件在任何时候都可能使用集成它的应用程序的基-href。这是我们不能冒的风险。
- 我用CSS类加载图像，并使用url('xxx')加载它们。这样，webpack就能正确地处理好他们。
- 当我构建应用程序时，我不再使用--base了。问题是我将element.html定义为“索引”，但是这个文件是空的。没有基-href定义，这就是抛出此错误的原因。当将所有脚本添加到此文件时，将在生成期间添加文件内容。
我希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51216624
复制相关文章
相似问题
腾讯云开发者
