How to use Angular 2 server side rendering

Question

I have developed a parser for my angular2 components which renders them in my HTML file. So far I am able to render them in HTML as

import {Component} from 'angular2/core';
import {NgSwitch, NgSwitchWhen, NgSwitchDefault,NgFor} from 'angular2/common';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';

@Component({
    selector: 'app',    
    template: `
            <div>
                <div>
                    <img src={{record}} class="pull-left image-responsive" style="width:50%;"> 
                    <img src={{record}} class="pull-right image-responsive" style="width:30%;">
                </div>
                <div>
                    <img src={{record}} class="pull-right image-responsive" style="width:100%;">
                </div>
                <br/><br/>
                <div>
                    <table class="table-responsive" style="width:100%;border-collapse:separate;border:solid #D8D8D8 2px;border-radius:5px;">
                        <tr style="background-color: grey;">
                            <th style="text-align:center;">{{record}}</th>
                            <th style="border-left:2px solid #f5821f;text-align:center;">{{record}}</th>
                        </tr>
                        <tr style="text-align:center;">
                            <td >&nbsp;</td>
                            <td style="border-left:2px solid #f5821f;">&nbsp;</td>
                        </tr>
                    </table>
                </div>
                <br/>
             </div>
           `
 })
export class App{
    public record;
    constructor() {       
        this.record="angular2";
    }
}

Then my static HTML gets generated correctly,But If I am using my component like this:

import {Component} from 'angular2/core';
import {NgSwitch, NgSwitchWhen, NgSwitchDefault,NgFor} from 'angular2/common';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import {Component1} from './component_1/component_1.component';
import {Component2} from './component_2/component_2.component';

@Component({
    selector: 'app',
    directives: [Component1,Component2],
    template: `
        <div class="container">
            <div class="row">
                <component_1>loading...</component_1>
            </div>
            <div class="row">
                <component_2>loading...</component_2>
            </div>             
        </div>
    `
 })
export class App{
    public record;   
    constructor() {       
        this.record="angular2";
    }
}

Then my components are loaded in HTML correctly,but my Static HTML is not generated correctly. See the images below: Components are loaded in browser

But static HTML is not generated correctly console window for static HTML

Server.ts

import * as path from 'path';
import * as express from 'express';
import * as universal from 'angular2-universal-preview';
// Angular 2
import {App} from './app/app.component'
let app = express();
let root = path.join(path.resolve(__dirname, '..'));

// Express View
app.engine('.ng2.html', universal.ng2engine);
app.set('views', __dirname);
app.set('view engine', 'ng2.html');

// Serve static files
app.use(express.static(root));
var i = 0;
// Routes

app.use('/', (req, res) => {
  res.render('index_new', {App}, function(err,html){
      console.log("------------------My HTML ---------\n"+(i++));
      console.log(html);
      console.log("------------------My HTML ----------");
      res.send(html);
  });
});

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

index_new.ng2.html

<!doctype html>
<html lang="en">

<head>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <link href="\node_modules\bootstrap\dist\css\bootstrap.min.css" rel="stylesheet" />
    <link href="\node_modules\bootstrap\dist\css\style.css" rel="stylesheet" />
    <script src="/node_modules/es6-shim/es6-shim.js"></script>
    <script src="/node_modules/es6-promise/dist/es6-promise.js"></script>
    <script src="/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="/node_modules/zone.js/dist/zone-microtask.js"></script>
    <script src="/node_modules/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="/dist/client/bundle.js"></script>    
</head>
<body>
    <app>Loading....</app>    
</body>
</html>

I tried the updated git Hub repository of @alexpods Thanks in advance.

Peter Machowski · Accepted Answer · 2017-04-26 13:44:35Z

4

+50

I had the same issue with universal-starter-kit Try the https://github.com/pmachowski/angular2-starter-kit

Pros:

server side rendering actually works
web worker
production ready
good structure
under active development
modern stack (webpack, karma, protractor)
unit & e2e tests

edited Apr 26, 2017 at 13:44

answered Feb 18, 2016 at 16:51

Peter Machowski

4875 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Bhushan Gadekar Over a year ago

Tried this...but my node modules are not getting installed @Peter

Peter Machowski Over a year ago

@BhushanGadekar I can see you are on Windows. I'm on a Mac and there is no problem with node_modules. Maybe if you post the error message I could help.

Bhushan Gadekar Over a year ago

typings ERR! message Unable to resolve "github:typings/typed-es6-promise"  \n                                      typings ERR! caused by Unable to connect to "https://raw.githubusercontent.com/typings/typed-es6-promise/master/typings.json" \n                                                 typings ERR! caused by getaddrinfo ENOTFOUND proxy.example.com

alexpods Over a year ago

@BhushanGadekar Hi. It was an error in typings library. I've updated the dependencies and moved es6-promise to ambient module definition. Now it should work fine. Try it out and if it doesn't work for whatever reason tell be about it.

Bhushan Gadekar Over a year ago

@alexpods,its working now..but I am note sure where my static html is generated? in console its showing nothing

|

Burak Tasci · Accepted Answer · 2017-04-18 12:35:17Z

1

Have a look on this example app that I deployed recently (https://github.com/ng-seed/universal)

Pros:

Server side rendering
SCSS compilation
Lazy/async routes
Development/Production (AoT) compilation
SPA/Universal modes
TsLint/Codelyzer
Up-to-date dependencies (Angular 4, platform-server, etc)
Modern stack (webpack, karma, protractor)

edited Apr 18, 2017 at 12:35

answered Mar 29, 2017 at 7:30

Burak Tasci

91712 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to use Angular 2 server side rendering

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related