angular 2 equivalent of react renderToString

Question

I am looking for the angular 2 equivalent of react-dom/server.renderToString

import { renderToString } from 'react-dom/server';    
// Render the component to a string
const html = renderToString(
  <App />
);

What is the simplest code example to transform a directive/component into HTML using NodeJs?

I guess it should be possible with one of these packages:

@angular/compiler - v2.0.0-rc.2
@angular/platform-server - v2.0.0-rc.2

What is your goal? You could use ComponentResolver to create ComponentFactory and create component dynamically, then get ComponentRef and then convert HTMLElement to string. — kemsky, Jun 19 '16 at 16:10
@kemsky could you provide an answer with code demonstrating that solution? — pxwise, Jul 26 '16 at 19:45

score 0 · Answer 1 · answered Jun 17 '16 at 15:25

0

Angular Components use HTML templates as part of the development process, but we actually compile those templates to Javascript, rather than HTML in order to render them to the browser.

The closest thing that might help you would be to look at https://github.com/angular/universal. This project represents the best way to run your Angular components on the server in a way that renders javascript and HTML and delivers it to the browser via the network.

We can't supply a simple method to "render" to HTML, because any sort of "rendering" involves the entire Angular framework (core, common, template compilation) and processing your entire component tree.

Hope this helps!

answered Jun 17 '16 at 15:25

Stephen Fluin

417
2
8

Thanks I had a deeper look at angular/universal and they have a function called `renderDocument` which does actually what I need however it is deprecated. – jantimon Jun 17 '16 at 15:45
https://github.com/angular/universal/blob/master/modules/universal/src/node/render.ts#L110-L120 – jantimon Jun 17 '16 at 15:48
Should be something like: `function (componentType, nodeProviders) { return bootstrap(componentType, nodeProviders) .then((appRef) => stringifyElement(appRef.location.nativeElement)) }` – jantimon Jun 17 '16 at 15:55

drejohnson · Answer 2 · 2016-06-20T14:23:35.157

import 'angular2-universal/polyfills';
import {
  provide,
  REQUEST_URL,
  ORIGIN_URL,
  NODE_ROUTER_PROVIDERS,
  NODE_HTTP_PROVIDERS,
  Bootloader
} from 'angular2-universal';

import { APP_BASE_HREF } from '@angular/common';

const bootloader = new Bootloader({
  platformProviders: [
    {provide: ORIGIN_URL, useValue: 'http://localhost:3000'},
    {provide: APP_BASE_HREF, useValue: '/'}
  ],
  async: true,
  preboot: false // { appRoot: 'app-root' } // your top level app component selector
});

export function ngApp(req, res) {
  let url = req.originalUrl || '/';

  const config = {
    template: `<!doctype html><html><head>...</head><body>...</body></html>`,
    directives: [AppComponent],
    providers: [
      {provide: REQUEST_URL, useValue: url},
      ...NODE_ROUTER_PROVIDERS,
      ...NODE_HTTP_PROVIDERS
    ]
  };

  bootloader.serializeApplication(config)
  .then(html => res.send(html));
}

Not sure why you mix it with express.. guess that's not necessary at all.. why didn't you include the import statements? — jantimon, Jun 19 '16 at 21:56

angular 2 equivalent of react renderToString

2 Answers2