Ivan Soshnikov2016-03-25 22:53:22
Ivan Soshnikov, 2016-03-25 22:53:22

Angular2 how to do server side rendering?

Somehow everything is cloudy and incomprehensible. There is a project on the angular/universal github. But I'm not so versed in Javascript to understand what exactly it solves.
The task is simple as a boot - when a visitor follows an external link to a single-page web application, the server renders a page that would also set the state of the application. And then the visitor is already working with a one-page rendering in the browser.
SEOs want the server to give the link not the bootstrap of the application, but the content equivalent to what the visitor will receive by clicking on a specific link in the one-page.
If the second angular is not able, are there any javascript libraries that can?
Thank you.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
bromzh, 2016-03-26

All answers are in src/server.ts file. The essence is this:
1) create an express application
2) set up the processing of .html files on the angular renderer from universe

app.engine('.html', expressEngine);
app.set('views', __dirname);
app.set('view engine', 'html');

3) We create a handler function that will render the angular application on the server if the user visits certain links
function ngApp(req, res) {
  let baseUrl = '/';
  let url = req.originalUrl || '/';
  res.render('index', {
    directives: [ Html ],

4) In this function, somehow you need to connect the root component App. In the link provided, this is done as follows: an Html component is created (src/server-only-app/html.component.ts), which contains all of the index.html code (except for html tags). It was possible to simply specify the root component in the ngApp function in the directives field.
5) Run the application
app.use(express.static(root, {index: false}));

// Routes with html5pushstate
app.use('/', ngApp);
app.use('/about', ngApp);
app.use('/home', ngApp);

// Server
app.listen(3000, () => {
  console.log('Listen on http://localhost:3000');

Emir Mamashov, 2016-11-14

Try this

Vasily Mazhekin, 2017-10-14

Here is a step-by-step and detailed description of how to enable rendering to the server with Angular Universal (with a working example on github)
Angular Universal: Server-side generation implementation ...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question