Render Angular 2 in backends with languages other than JavaScript

[angular]

Render Angular 2 in backends with languages other than JavaScript

[MarkPieszak]

I'm actually not familiar with Edge, but basically how it's done from the .NET Core side of things is:

.NET aware Tag, in this case an attribute (asp-prerender)
This can be passed a few things, webpack config, data, and the bootstrap server file location.

It in turn invokes a Node process that simultaneously handles webpack dev server
& also
serializes the app with Universal passing the needed server-side info (url, origin for example) to the JS/TS file that ends up calling Universal to serialize the app, passing it back as an html string.

That's the general big picture, there's a few more detailed things about it, but that's jist! @Nicholas-Westby

[0x-r4bbit]

@gdi2290 Can we add nickel.rs to the list? http://nickel.rs /cc @cburgdorf

[cburgdorf]

I'm happy to help with an implementation for Nickel but I'm not sure how feasible it is. I guess this relies on offloading some of the work to a serverside JS renderer (https://github.com/gdi2290/play-angular2/blob/master/app/controllers/Application.scala#L66)

[PatrickJS]

I know someone in the Rust community so I can see if he can work with you guys on it

[PatrickJS]

The idea here is to have a baseline way of rendering on the server with the quick and dirty way being the cli. The preferred method would be compiling Angular 2 into the language you're working on which means creating you're own facades

[danicomas]

@gdi2290 add Microsoft IIS too.

[PatrickJS]

@danicomas Microsoft IIS might take more work unless we have someone who knows how to run JavaScript in that environment

[flyingmutant]

For Go, may I suggest going with raw net/http — which would be a solution that every Go project can use.

[PatrickJS]

closing for now until we have more time or if there is more interest in the community to help out

[alukach]

I'd be interested to hear what the steps for moving these types of things forward would be. Is there a common pattern to apply to most of these languages?

[Nicholas-Westby]

Just a heads up that I'm now researching how to accomplish server side rendering using Edge.js in ASP.NET MVC: https://github.com/Nicholas-Westby/angular-2-lab

I also have a Stack Overflow question in relation to this: http://stackoverflow.com/questions/40625354/server-side-rendering-angular-2-in-asp-net-with-edge-js

If anybody has any sort of guidance, that would be useful.

[Nicholas-Westby]

Thanks for the quick reply, @MarkPieszak! I was actually poking around in your repo trying to figure things out. Could you point me to where the tag helpers are defined (asp-prerender-module, asp-prerender-webpack-config, asp-prerender-data)? That might help me understand things a bit better.

By the way, I'm essentially trying to use Edge.js to invoke Node from C# (sounds like you do something similar). My intention is to have all the compilation/minification/tree shaking/etc take place during compile time, then at runtime use Edge.js/Node to perform server side rendering to markup. I'm not quite sure if I fully understand, but it sounds like you may be essentially combining the two processes (compile and render) into a single tool. For my purposes, just seeing how you are doing that would be of great use.

[Nicholas-Westby]

FYI, I'm going to abandon my efforts to get Angular rendering on the server side in ASP.NET. I've spent about 3 days on this so far and have been running into too many issues. If anybody else wants to resume where I left off, my latest attempt is in the "part-deux" branch of my "angular-2-lab": https://github.com/Nicholas-Westby/angular-2-lab/tree/part-deux

[MarkPieszak]

What issues were you running into? I can see if it's possible to get .NET 4.6 to call Node the way we need to.

[Nicholas-Westby]

I solved a bunch of them today. This commit offers a little guidance on what next steps might be: Nicholas-Westby/angular-2-lab@5e9c14e

In short, I got the code to browserify some JavaScript (that was itself using Node.js modules), compile some TypeScript to JavaScript, coordinate between the browserified JavaScript and the compiled TypeScript, and finally call that JavaScript from ASP.NET MVC (using .NET 4.5.2 and Edge.js).

That all works fine and dandy. The thing I tried to tackle after that was to get the TypeScript code from ASP.NET Core Angular Universal. I think I got that compiling OK now (maybe... it seems to fluctuate with the weather).

As indicated in the above commit, the next goal is to call some function from my main TypeScript file that renders some Angular into HTML. I believe this may be done by calling into bootstrap-server.ts, but I haven't had a chance to try it yet.

If you want to give it a go, just follow the instructions to get things compiled, then open the solution in Visual Studio and run. You should see this:

Note that the message you see does not involve any Angular. It just confirms that I'm seeing some code derived from both NPM modules and from TypeScript.

[Nicholas-Westby]

Oops, looks like I missed a TypeScript file in that commit from above. Here's the commit that fixes that: Nicholas-Westby/angular-2-lab@0f9f830

[Nicholas-Westby]

Here's a new issue in my latest commit: Nicholas-Westby/angular-2-lab@9fab365

Browserify seems to be choking (I'm trying to run browserify on compiled TypeScript):

I was seeming to make progress by avoiding the paths defined in tsconfig.json, until I hit this. Maybe I shouldn't be running browserify? Is this one of the reasons Webpack is used?

[MarkPieszak]

Is platform-browser-dynamic in your node_modules?

[Nicholas-Westby]

Looks like it wasn't. Attempting to adjust my package.json now to more closely match the package.json here: https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/package.json

[Nicholas-Westby]

Now that I updated the package.json, I get a new error (node_modules/rxjs/observable/PairsObservable.d.ts(1,1): error TS2688: Cannot find type definition file for 'chai'):

[MarkPieszak]

Add it in your devDepdencies, or (I believe) the newest version of RxJs fixes it. I have the @types/chai in there for now.

"@types/chai": "^3.4.34", 

[Nicholas-Westby]

Thanks, that seems to have fixed that error. Here's the new error I'm seeing:

Strange that it's using underscores. I'd expect that to say require('http-client').

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}