19

I'm exploring the possibility of rendering Angular 2 on the server side using Edge.js in an ASP.NET MVC application.

I'm aware that the Angular Universal Starter Kit has part of this equation: https://github.com/alexpods/angular2-universal-starter

However, it is using a Node.js server. I'd rather not add a Node.js server as an extra web server on top of the existing IIS server. My thought is I can perform the rendering of the Angular on the server side using Edge.js (i.e., to run the necessary JavaScript to generate the markup).

I am very new to Angular 2, so getting an example up and running is non-trivial for me. Based on this closed issue, I'd say there is currently no effort being made to add support for Edge.js (though it was being considered at one point): https://github.com/angular/universal/issues/40

Does anybody know if rendering Angular on the server side using Edge.js from an ASP.NET MVC app is possible?

By the way, I'm stuck on .NET 4.5.2 (Umbraco requires it), so I can't move to .NET Core and make use of this: https://github.com/MarkPieszak/aspnetcore-angular2-universal

Nicholas Westby
  • 1,109
  • 13
  • 32
  • I'm doing research here, but it's slow going: https://github.com/Nicholas-Westby/angular-2-lab – Nicholas Westby Nov 17 '16 at 02:21
  • Hey Nicholas! We keep forgetting to rename the "examples" in the Universal repo to just playground, those are a mess, mainly there so we can just manually test changes we make to Universal and other modules. – Mark Pieszak - Trilon.io Nov 17 '16 at 03:10
  • But ya the key on the server-side is somehow invoking a Node process that passes Origin & Url (since we need to know where they are `/` `/home` etc, so we can render the correct section. But yea, you call platformNodeDynamic.serializeModule passing a Zone wrapped NgModule of your application. https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/Client/bootstrap-server.ts – Mark Pieszak - Trilon.io Nov 17 '16 at 03:13
  • 1
    If you can figure out how to invoke a Node process in the same process (make sure you can capture any errors from it etc) let me know, I can help guide you in the right direction! – Mark Pieszak - Trilon.io Nov 17 '16 at 03:14
  • @MarkPieszak I got Node to run from the server, but I'm stuck on an error message that says "reflect metadata shim is required when using class decorators": https://github.com/Nicholas-Westby/angular-2-lab/issues/1 – Nicholas Westby Nov 18 '16 at 22:57
  • FYI, the new error I'm getting is "platformNodeDynamic is not a function": https://github.com/Nicholas-Westby/angular-2-lab/issues/1#issuecomment-261670134 – Nicholas Westby Nov 18 '16 at 23:47
  • You're using an old version of Node/NPM, get the latest Node 7.1. That's the reflect-metadata issue – Mark Pieszak - Trilon.io Nov 19 '16 at 01:40
  • With Core we start with an MVC TagHelper (https://github.com/aspnet/JavaScriptServices/blob/2ba5a0ac930a055acc6e711a701ed43aa993ec8b/src/Microsoft.AspNetCore.SpaServices/Prerendering/PrerenderTagHelper.cs#L15) then we're in .NET land, that's where you want to call your EdgeJS, to invoke universal from. – Mark Pieszak - Trilon.io Nov 19 '16 at 01:44

1 Answers1

0

You can use SpaServices package from Microsoft. Internally this package will forward call to node server, but You won't have to run node on top of your asp.net core server.

app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";

spa.UseSpaPrerendering(options =>
{
    options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";
    options.BootModuleBuilder = env.IsDevelopment()
        ? new AngularCliBuilder(npmScript: "build:ssr")
        : null;
    options.ExcludeUrls = new[] { "/sockjs-node" };
});

if (env.IsDevelopment())
{
    spa.UseAngularCliServer(npmScript: "start");
}
});

See more in docs: https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-2.1&tabs=visual-studio#drawbacks-of-ssr

Shadow
  • 2,089
  • 2
  • 23
  • 45