Question

我刚刚使用Angular 6创建了我的第一个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>

我的网络组件index.html不包含base-href。

浏览器现在尝试加载Web组件的资产：

https://www.example.com/assets/i18n/de_CH.json

代替

 https://component.example.com/assets/i18n/de_CH.json

当我尝试在构建过程中添加base-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)

真的很感谢任何帮助，我的想法已经用完了。

Answer 1

一些提示：

正如Skorunka所建议的，您应该在<base>中构造<head>，因为它们都共享相同的起始URL。此外，在这种情况下，同时使用相对URL和绝对URL都是没有意义的。
--base-href配置甚至可以覆盖HTML中的配置，因此请不要担心。
删除type标记中的script，它绝对不是Javascript，也没有必要。

最终外观：

<base href="https://component.example.com/">
<script src="html-imports.min.js"></script>
<link rel="import" href="element.html">
<my-web-component uuid="2342-asdf-2342-ffsk"></my-web-component>

回到问题所在，您能给我介绍一下您的组件源代码吗？问题可能出在组件内部加载文件的方式上，而不是组件的导入方式上，也不在于此处的代码。

Answer 2

我假设角度6不再支持base-href。

那样您就会收到此错误。

无法读取null的属性“ startTag”

您可以在这里找到解决方案。

base-href Not Supported in Angular 6

Answer 3

以上答案均不适合我，因此我发布了解决此问题的方法。我完全停止使用base-href。对于所有资产，我使用其他方式加载它们：

将绝对URL用于脚本或图像（可以与domain-url环境变量一起使用）。如果不这样做，Web组件会随时使用集成它的应用程序的base-href来发生。这是我们无法承担的风险。
我正在使用CSS类加载图像，并使用url（'xxx'）加载图像。像这样的webpack可以正确处理它们。
构建应用程序时，我不再使用--base-href。问题是我将element.html定义为“ index”，但是此文件是空的。没有base-href定义，这就是为什么出现此错误的原因抛出。当所有脚本都在构建时添加文件内容已添加到此文件。

我希望这会有所帮助。

集成的Web组件在Angular 6中使用了错误的base-href

3 个答案: