Search code examples
javascriptangularserver-side-renderingangular2-universal

Angular4 Universal Server Side Rendering would return more HTML rendered on request

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>

I expect to have some html tags and info inside <demo-app></demo-app>

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"

Tested using https://github.com/angular/universal/blob/master/modules/ng-express-engine/src/main.ts and import { ngExpressEngine } from '@nglibs/universal-express-engine'

Following this discussion i could see that is a new implementation for that

Tryed to import as it suggest, but does not work (namespace does not exists)

  • import { ngExpressEngine } from '@universal/ng-express-engine'

Tested with version rc.5 as suggested in this pull request.

Finally , following this link

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!

Solution

  • Thanks @mark-pieszak for you attention and support!

    I could make it work using the https://github.com/clbond/angular-ssr , working with angular-material and everything.. pretty good =)