Universal: feat: koa 2 engine

[paullryan]

Note: for support questions, please use one of these channels: https://github.com/angular/universal/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...
• [ ] bug report
• [x] feature request
• [ ] support request => Please do not submit support request here, see note at the top of this template.
• What modules are related to this pull-request
• [ ] express-engine
• [ ] grunt-prerender
• [ ] gulp-prerender
• [ ] hapi-engine
• [ ] universal-preview
• [ ] universal
• [ ] webpack-prerender
• [x] n/a
• Do you want to request a _feature_ or report a _bug_?

This was discussed in https://github.com/angular/universal/issues/49 as a future thing, with more support for es6 in node and typscript's ability to downcompile to es6 looks like now would be the time for a Koa.js 2 engine. Should work as a middleware to koa 2 (e.g. async function universal(ctx, next)).

• What is the current behavior?

No support.

• What is the motivation / use case for changing the behavior?

Koa is following javascript next paradigms and is much closer to the async code being taught with angular2.

[lightningtgc]

I think you can implement koa engine by using Babel, sincetypescript 2.0 doesn't support ES5/ES3 async/await and generators (just compile to ES6).

But it is not a good way.

Typescript 2.1 will support it, and we may waiting for it announce.

[paullryan]

True that it compiles to es6, however generators from es6 are now well supported in node.js (v4+) which is what angular universal is targeting. As long as we implement this engine in a way that can be removed (maybe another module) it shouldn't be a big issue. The main reason I'm asking for help here is that the differences between the prerenders and the engines are a little complicated. I will have some time to dig into it this month but it would be great to hear from those working deep in universal what the engines are doing.

[paullryan]

Oh and If I get something working I'm happy to PR it.

[lightningtgc]

@paullryan
Node V4 just support 52% ES6, if you choose typescript compile to ES6, you may care about it.
Koa engine is more like express engine which has implemented, so it's not too hard.
Actually, my project is base on koa 2,so I find these infomation.
Anyway, waiting for your pr.

[amitport]

how about just adding a renderer to https://github.com/tj/consolidate.js?

should work fine for express3/4 and koa1/2

[PatrickJS]

@amitport can you create an issue about consolidate.js support

[damianobarbati]

@lightningtgc how come you're building something so edge here, on top of an edge fw like Angular2, on top of an edge TypeScript aiming to bring es6 and es7 features in a world still mostly es5, but you're still caring about the old (yeah I said old, LTS but jurassic) Node 4 which is not even by far es6 compliant?
Sticking to Express is a no-go: I totally understand the "nodejs-version-market-share" matter but is there any concrete chance Angular Universal will support KoaJS (a proper and modern ES6 routing engine) natively? Without having us to use weird tricks to fit it in current v?
BTW: thank you guys for all the effort you're investing in this.

[paullryan]

@amitport and @gdi2290 I'm open to wherever we want the renderer to live, I've created a really basic version of one that I broke when 2.0 came out but as I said I'm happy to try and help with this as I'd love to see a community version Koa2 support (be in universal or as a separate module).

I personally believe koa2 + universal with esnext is a very clean solution for building fast scalable web applications that can complete with the current serverside only websites.

[MarkPieszak]

@paullryan @damianobarbati
Really what you'd need to do is mirror what's happening in the express-engine module, but have it be callable & work with however koa handles things. I'm unfamiliar with Koa myself, otherwise I'd take a stab at it. But basically if you use that as a baseline, it'll at least get you going in the right direction and we can help if you run into things!

The alternative is calling the Universal serializer manually for all/some end-points to prerender your applications.

You can see that being done here in the documentation: (https://github.com/angular/universal/blob/master/DOCUMENTATION.md)

// 2. get the top level NgModule for the app and pass in important values to Angular Universal 
app.get('/*', (req, res) => {

  // Our Universal - express configuration object
  const expressConfig : ExpressEngineConfig = {
    req,
    res,
    ngModule: MainModule,
    preboot: false,
    baseUrl: '/',
    requestUrl: req.originalUrl,
    originUrl: 'http://localhost:3000'
  };

  // NOTE: everything passed in here will be set as properties to the top level Zone
  // access these values in your code like this: Zone.current.get('req');
  // this is temporary; we will have a non-Zone way of getting these soon
  res.render('index', expressConfig);
});

[paullryan]

@MarkPieszak yep I effectively have a version like your demo code now, but it feels a little clunky when developing, the express engine version is much cleaner feeling when developing a universal app. I think that's definitely the route to go and I'll see where I might have time to do a PR for that.

[PatrickJS]

won't be officially supported in ng4
https://github.com/angular/angular/issues/13822