angular - 如何使 Stencil & Angular Universal 工作

Question

我想通过使用 Angular Universal 在我的 Angular 应用程序中制作 SSR。

SSR 可以工作，但不会呈现使用 Stencil 制作的 Web 组件(禁用 JS 时不起作用)。

LitElement 和 Vanilla JS Web 组件也不起作用。

我发现 Stencil 有一个 dist-hydrate-script将使其工作的输出。

但我没有找到任何关于它的文档，查看源代码也没有帮助。 (我不知道如何使用 hydrateDocument() 或 renderToString() 方法)。

谢谢你=)

Answer 1

https://github.com/sajTempler/stencil-ssr/blob/master/example_endpoint/server/index.js#L4
在模板配置中添加到您的输出目标

{ type: 'dist-hydrate-script' },

这将创建您可以在您的服务器上使用的水合物应用程序

const { renderToString  } = require('../client/hydrate');

并使用 express :

app.get('/', async (_req, res) => {

    const { html } = await renderToString("<my-component></my-component>", {
        prettyHtml: true
    })

    res.send(html);
})