我构建了一个应用程序加载动态内容并通过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试图寻找一个与标签fs-image匹配的Angular组件，因为它没有找到一个，它只是从生成的内容中删除了fs-image元素。
我们如何告诉Scullyfs-image是一个web组件?
要在Angular中使用自定义元素，我们需要添加一个自定义模式:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...
schemas: [CUSTOM_ELEMENTS_SCHEMA],
所以我添加了这个，但是内容fs-imageweb组件仍然从Scully生成的内容中剥离。
创建Scully Issue
https://github.com/scullyio/scully/issues/1204
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就没有办法知道它。