如何使用Angular 2服務器端渲染

Question

我為angular2組件開發了一個解析器，它將它們呈現在我的HTML文件中。 到目前為止，我能夠以HTML格式呈現它們

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";
    }
}

然后我的靜態HTML生成正確，但如果我正在使用我的組件，如下所示：

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";
    }
}

然后我的組件正確加載HTML，但我的靜態HTML沒有正確生成。 請參見下圖： 組件在瀏覽器中加載

但靜態HTML不能正確生成靜態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>

我嘗試了@alexpods的更新的git Hub存儲庫，提前謝謝。

Answer 1

我對universal-starter-kit有同樣的問題試試https://github.com/pmachowski/angular2-starter-kit

優點：

服務器端渲染實際上有效
網絡工作者
准備好生產
良好的結構
積極發展
現代堆棧（webpack，業力，量角器）
unit＆e2e測試

Answer 2

看看我最近部署的這個示例應用程序（ https://github.com/ng-seed/universal ）

優點：

服務器端渲染
SCSS編譯
惰性/異步路由
開發/生產（AoT）編譯
SPA /通用模式
TsLint / Codelyzer
最新的依賴項（Angular 4，平台服務器等）
現代堆棧（webpack，業力，量角器）

如何使用Angular 2服務器端渲染

問題描述

2 個解決方案

解決方案1
4 已采納 2016-02-18 16:51:58

解決方案2
1 2017-03-29 07:30:41

如何使用Angular 2服務器端渲染

問題描述

2 個解決方案

解決方案1 4 已采納 2016-02-18 16:51:58

解決方案2 1 2017-03-29 07:30:41

解決方案1
4 已采納 2016-02-18 16:51:58

解決方案2
1 2017-03-29 07:30:41