ponkys / angular-with-stencil-ssr

POC with angular and stencil working with serverside rendering

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ConsumerWebPoc

This project was generated with Angular CLI version 8.0.3.

How to hack

npm install
npm run build:ssr && npm run serve:ssr

Context

this project is consuming stencil web components from @ponkys/consumer-web-components-test dependency declared in package json. This includes the hydrate folder in the dist (I manually pasted it there). In a stencil project add the following object to the outputTargets array in stencil.config.js:

  {
    type: 'dist-hydrate-script'
  }

this hydrate folder exposes renderToString and hydrateDocument methods that are useful for ssr.

IMPORTANT PATCH

file index.js from node_modules/@ponkys/consumer-web-components-test/dist/hydrate/index.js in line 19.

  const filePath = path.resolve(process.cwd(), `node_modules/@ponkys/consumer-web-components-test/dist/hydrate/app.js`);

It seems that Angular universal has wrong node __dirname set.

About

POC with angular and stencil working with serverside rendering


Languages

Language:TypeScript 71.6%Language:JavaScript 22.3%Language:HTML 5.5%Language:CSS 0.5%