Angular4通用服务器端渲染将根据请求返回更多HTML

Question

i'm tryingo to use universal and angular4.. everything works, accessing directly via hash routes as well.. but the problem is the request always shows <body><demo-app></demo-app></body> 我正在尝试使用通用和angular4 ..一切正常，也可以直接通过哈希路由访问..但问题是请求始终显示<body><demo-app></demo-app></body>

I expect to have some html tags and info inside <demo-app></demo-app> 我希望<demo-app></demo-app>有一些html标签和信息

Here is how I implemented that: 这是我的实现方式：

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({
      appId: 'my-app-id'
    }),
    ServerModule,
    ServerTransferStateModule,
    AppModule
  ]
})

export class ServerAppModule {

  constructor(private transferState: TransferState,
  private translateService: TranslateService){
    translateService.use('en');
  }
  // Gotcha
  ngOnBootstrap = () => {
    this.transferState.inject();
  }
}


app.engine('html', ngExpressEngine({
  bootstrap: ServerAppModule
}));

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


app.get("*", (req, res) => {
  console.time(`GET: ${req.originalUrl}`);
  res.render('../dist/index', {
    req: req,
    res: res
  });
  console.timeEnd(`GET: ${req.originalUrl}`);
});

My versions are "@angular/common": "^4.0.0" 我的版本是“ @ angular / common”：“ ^ 4.0.0”

Tested using https://github.com/angular/universal/blob/master/modules/ng-express-engine/src/main.ts and import { ngExpressEngine } from '@nglibs/universal-express-engine' 使用https://github.com/angular/universal/blob/master/modules/ng-express-engine/src/main.ts进行测试，并import { ngExpressEngine } from '@nglibs/universal-express-engine'

Following this discussion i could see that is a new implementation for that 经过讨论，我可以看到这是一个新的实现

https://github.com/angular/universal/pull/681/files https://github.com/angular/universal/pull/681/files

Tryed to import as it suggest, but does not work (namespace does not exists) 尝试按提示导入，但不起作用（命名空间不存在）

import { ngExpressEngine } from '@universal/ng-express-engine' 从'@ universal / ng-express-engine'导入{ngExpressEngine}

Tested with version rc.5 as suggested in this pull request. 已根据此拉取请求中的建议使用rc.5版本进行了测试。

Finally , following this link 最后，点击此链接

https://github.com/angular/universal/tree/master/modules/ng-express-engine https://github.com/angular/universal/tree/master/modules/ng-express-engine

Tested with this lib gives me same results: 用这个库进行测试可以得到相同的结果：

import { ngExpressEngine } from '@nguniversal/express-engine';

At least the project is running, so i can keep coding and using it.. but looking forward to have a full server side rendering. 至少该项目正在运行，所以我可以继续编码和使用它。.但期待拥有完整的服务器端渲染。

Thanks! 谢谢！

Answer 1

For Angular 4+ with platform-server, use the official @nguniversal/express-engine , that other one looks like an older version of the express-engine that someone published for some reason? 对于带有平台服务器的Angular 4+，请使用官方@nguniversal/express-engine ，另一个看起来像某个人出于某种原因发布的Express引擎的旧版本吗？

The namespace is now going to be @nguniversal though so give that one a shot and you should be fine! 现在，命名空间将是@nguniversal因此请@nguniversal一下，您应该会很好！

You can find documentation on the newest universal express-engine (for Angular 4+ and platform-server) here: 您可以在以下位置找到有关最新通用表达引擎（适用于Angular 4+和平台服务器）的文档：

https://github.com/angular/universal/tree/master/modules/ng-express-engine https://github.com/angular/universal/tree/master/modules/ng-express-engine

Answer 2

Thanks @mark-pieszak for you attention and support! 感谢@ mark-pieszak的关注和支持！

I could make it work using the https://github.com/clbond/angular-ssr , working with angular-material and everything.. pretty good =) 我可以使用https://github.com/clbond/angular-ssr使其工作，使用angular-material和其他所有方法。

Angular4通用服务器端渲染将根据请求返回更多HTML

问题描述

2 个解决方案

解决方案1
2 2017-04-25 15:17:46

解决方案2
0 已采纳 2017-07-12 12:24:10

Angular4通用服务器端渲染将根据请求返回更多HTML

问题描述

2 个解决方案

解决方案1 2 2017-04-25 15:17:46

解决方案2 0 已采纳 2017-07-12 12:24:10

解决方案1
2 2017-04-25 15:17:46

解决方案2
0 已采纳 2017-07-12 12:24:10