Angular 2 / Express isomorphic

[jaumard]

Just found an official repo for create isomorphic App with Angular 2 and Express : https://github.com/angular/universal

After a quick look doesn't look too difficult to integrate this with trailpack-express. Maybe I'll try to make a repo example with it to see what it can look like at the end with Trails.

That make me ask myself about trailpack support. What trailpack do you want to support for a V1 ?

[jaumard]

Just see there an hapi example too :)

[scott-wyatt]

I should have linked you to this, cause that was my inspiration! Let's support Angular for V1. Just so we can get a work flow, and then we can pull some one on who is more experienced in React.

[jaumard]

Ha ha no problem ;) this discussion can be interesting here too https://github.com/trailsjs/trails/issues/208#issuecomment-222172265 maybe you will have some ideas ^^

[jaumard]

Ok I have a start here https://github.com/jaumard/trails-angular2-isomorphic Trails part is working. All Trails file are in TS and compile into ES6 by gulp. I try to integrate the universal starter example https://github.com/angular/universal-starter but as it use webpack :/ I try to only include Angular2 part, it was also compile (into es5 this time) by gulp. But when I start the server it's not working I have :

/Users/jaumard/Downloads/trails-angular2-isomorphic-master/node_modules/@angular/core/src/util/decorators.js:165
        throw 'reflect-metadata shim is required when using class decorators';
        ^
reflect-metadata shim is required when using class decorators

npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.4.4
npm ERR! npm  v3.9.0
npm ERR! code ELIFECYCLE
npm ERR! trails-angular-2-isomorphic@0.0.0 start: `gulp && node dist/server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the trails-angular-2-isomorphic@0.0.0 start script 'gulp && node dist/server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the trails-angular-2-isomorphic package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp && node dist/server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs trails-angular-2-isomorphic
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls trails-angular-2-isomorphic
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/jaumard/Downloads/trails-angular2-isomorphic-master/npm-debug.log

I see a lot of things about this on internet but nothing fix the issue for me... Maybe you will be more lucky with a fresh look :D

My idea here is to first create an example of isomorphic with Trails/Angular2 and when we have something working start working on treefrog, it will be more simple to see the architecture, file structure....

[jaumard]

I keep you updated, I fix all server generation problem and the Trails server start correctly now. But the front part doesn't works yet :( in the universal starter ket they use webpack witch bundle everything so they just load bundle.js to the front ^^. As I use gulp nothing was done for front yet. So all the index.js need to be written (load all library files and app) in order to work. No luck until now for me to make it work. But I think we're close to the end to have a working example :)

[scott-wyatt]

Awesome! I will most definitely take a look and see what i can do to help. I like the idea of getting an example app together and then using it to prototype treefrog.

[jaumard]

Cool ! Let me know if you found something ^^ make me crazy for now :) There multiple way to do it :

• make the actual code (base on universal starter repo) working by making the systemJS config
• remove the actual code and try instead to use universal example on main repo https://github.com/angular/universal/tree/master/examples/src witch not use webpack by default (so maybe more luck with this)

[scott-wyatt]

Yeah, we will definitely need something that allows people to use whatever task manager they want (webpack, gulp, whatever new comes out).

[jaumard]

@scott-wyatt did you have time to look a little ? I really could use a helping hand on this. :/

[jaumard]

I simplify the all things... Trails app doesn't need to be in TS so I restore the JS version who load the compiled todo angular app. Same error but more clean architecture.

[scott-wyatt]

Will look soon! Sorry it's taking me so long.

[jaumard]

Hey @scott-wyatt ! Finally it's working ! Not optimal at all I have to work more on it to have something more clean with the architecture but that's a start who's working !

Those PRs will be helpful to make things more clean : https://github.com/trailsjs/trailpack-router/pull/56 https://github.com/trailsjs/trailpack-express/pull/30

[scott-wyatt]

You are a rock star!

[jaumard]

@scott-wyatt I just update the repo https://github.com/jaumard/trails-angular2-isomorphic I think the file structure and architecture is clean :) Let me know what do you think of it !

[scott-wyatt]

I'll take a look!

[scott-wyatt]

This is incredible! Wow, well done! I'm going through all the src now.

[scott-wyatt]

Okay, @jaumard and I have an idea how we will accomplish what was discussed in this conversation. Closing this discussion to open new issues.