[英]How to use Angular 2 server side rendering
我为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 > </td>
<td style="border-left:2px solid #f5821f;"> </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没有正确生成。 请参见下图: 组件在浏览器中加载
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存储库,提前谢谢。
我对universal-starter-kit
有同样的问题试试https://github.com/pmachowski/angular2-starter-kit
优点:
看看我最近部署的这个示例应用程序 ( https://github.com/ng-seed/universal )
优点:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.