0

我构建了一个应用程序加载动态内容并通过 Scully 呈现它。内容中有这样的 Web 组件：


Content selection dialog that looks like this:

<fs-image url='https://fireflysemantics.github.io/i/developer/instant-html-vscode.png'></fs-image></p>

<p>Sample topic examples</p>",

我猜 Scully 试图寻找与标签匹配的 Angular 组件，但fs-image由于找不到，它只是fs-image从生成的内容中删除了该元素。

我们如何告诉 Scully 这fs-image是一个 Web 组件？

要在 Angular 中使用自定义元素，我们需要添加一个自定义模式：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

...

schemas: [CUSTOM_ELEMENTS_SCHEMA],

所以我添加了这一点，但内容fs-imageWeb 组件仍然从 Scully 生成的内容中剥离。

创建 Scully 问题

https://github.com/scullyio/scully/issues/1204

4

1 回答 1

3

Scully 不会从生成的应用程序中取出任何内容，除非您使用插件主动删除它。

当您运行您的应用程序时，这是它生成的输出：

<html lang="en"><head>
  <meta charset="utf-8">
  <title>Test</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.09e2c710755c8867a460.css"><style></style></head>
<body data-new-gr-c-s-check-loaded="14.991.0" data-gr-ext-installed="">
  <app-root _nghost-aoj-c3="" ng-version="11.0.9">
    <router-outlet _ngcontent-aoj-c3=""></router-outlet>
    <app-home _nghost-aoj-c2="">
      <p _ngcontent-aoj-c2="">
         <h1> Scully Custom Element Test</h1>  
      </p>
    </app-home><!---->
  </app-root>
<script src="runtime.0e49e2b53282f40c8925.js" defer=""></script>
<script src="polyfills.1f3b39c11fffb306d5a3.js" defer=""></script>
<script src="main.30df6ebad07b05698939.js" defer=""></script>
</body></html>

您可以清楚地看到该fs-image元素无处可寻。Scully 无法呈现不在应用程序输出中的任何内容。您可以通过以下方式自行检查：

ng build --prod
npx scully serve

然后打开http://localhost:1864/。执行此操作时，您正在查看未修改的应用程序。这是 Scully 用来生成其输出的内容。如果它不在那里，Scully 就无法知道它。

于 2021-01-16T05:29:47.793 回答