Angular4 Server呈现Promise内容

时间:2017-08-28 12:02:35

标签: angular angular-universal

我正在使用角度应用程序(基于Universal的服务器)。 我有以下代码

app.component.ts

@Component({
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit{


  constructor(private meta: Meta, private myService: MyService) {

  }

  ngOnInit() {
     this.myService.getData().subscribe(data => {
       this.meta.addTags([
        { name: data.name,   content: data.content}
      ]);
     })
  }

}

这是我的server.ts

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';

const PORT = 4000;

enableProdMode();

const app = express();

let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

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

app.get('*.*', express.static(join(__dirname, '..', 'dist')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`listening on http://localhost:${PORT}!`);
});

这是在我的html中添加标签但是在运行时。如果我尝试查看源代码,我的元标记就不存在了。如果我直接在ngOnInit(带有一些硬编码值)的开头移动addTags而不是在订阅中,它会直接出现在我的源代码中。 我确实希望我的server.ts中缺少配置(比如在渲染之前等待异步调用)。

0 个答案:

没有答案