6

我刚刚使用 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>

我的 web 组件 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)

非常感谢任何帮助，我的想法已经不多了。

4

3 回答 3

5

先说几个tips：

  • 正如 Skorunka 所建议的那样，您应该构建<base>已经存在的，<head>因为它们都共享相同的起始 URL。此外，在这种情况下同时使用相对 URL 和绝对 URL 是没有意义的。
  • 该--base-href配置甚至可以覆盖 HTML 中的配置，所以不用担心。
  • 删除typeinscript标记，它绝对不是 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>

回到问题上来，你能把你的组件源代码给我吗？问题可能在于您在组件内加载文件的方式，而不是您导入组件的方式，也不是此处的代码。

于 2018-07-10T10:27:36.083 回答
3

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

这就是你得到这个错误的方式。

无法读取 null 的属性“startTag”

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

Angular 6 不支持 base-href

于 2018-07-12T07:21:50.507 回答
0

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

  1. 对脚本或图像使用绝对 URL（可以与 domain-url 环境变量放在一起）。如果不这样做，Web 组件可能会在任何时候使用集成它的应用程序的 base-href。这是我们不能承担的风险。
  2. 我正在使用 CSS 类加载图像并使用 url('xxx') 加载它们。像这个 webpack 可以正确处理它们。
  3. 当我构建应用程序时，我不再使用 --base-href 了。问题是我将 element.html 定义为“索引”，但这个文件是空的。没有 base-href 定义，这就是引发此错误的原因。当所有脚本都添加到此文件时，文件内容会在构建期间添加。

我希望这有帮助。

于 2018-07-16T11:56:18.860 回答