Javascriptservices: Angualr 2 with SSR and AoT

[colltoaction]

Hey guys,

For a couple of months I've been developing my Angular 2 project based on this template. It worked wonders, thanks. But for the last month or so I diverged: I removed SSR in favor of AoT. So what this means is that both SSR and AoT work, but integrating them is what's missing from this template.

I've been following progress, and it seems the Universal guys have made it work: https://github.com/angular/universal/issues/540.

Do you guys think you can give this a look? I'll definitely come back with my findings if I find the time to test it out, but your help would be much appreciated. I know @MarkPieszak was also interested given a recent conversation at Universal's gitter.

Thanks!

[MarkPieszak]

I'll have an example of SSR with AOT soon hopefully, but I'll post back if I run into anything coming from the .NET side. It shouldn't be too much of an issue, but it raises the complexity a little bit. (Due to multiple AOT modules/tsconfigs etc)

Let you know once I have it together in my repo @tinchou

[derricksimpson]

Mark, hate to bug you, but very curious as to whether you were able to get it working... Thanks!

[MarkPieszak]

@derricksimpson
No worries!
Yes most things are working actually, since there are still a few things being ironed out, we don't want anyone to use it (at least for production) just yet! There are some minor bugs being fixed right now that we've found so far. Without a doubt I'll be updating my repo & send a PR here to JSServices as soon as things have stabilized :) @derricksimpson

[derricksimpson]

@MarkPieszak - Sounds great. Thanks!

[MarkPerryBV]

Would it be safe to say that a AoT integration in Angular2 Template won't be coming as you are concentrating on the Angular4 template?

[colltoaction]

V4 is the newest version, and I wouldn't think they'd spend time on old
stuff.

Other than that, you should give v4 a try since it's mostly backwards
compatible. I personally didn't have much trouble migrating :).

On Thu, Mar 30, 2017, 00:14 Mark Perry [e-mail] wrote:

Would it be safe to say that a AoT integration in Angular2 Template won't
be coming as you are concentrating on the Angular4 template?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aspnet/JavaScriptServices/issues/508#issuecomment-290323218,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABeg9E-kTis8iqamrOgdOnmecBdDEmETks5rq1ZtgaJpZM4LLAG8
.

[MarkPerryBV]

@tinchou Does the V4 Template have AoT support built in when running in production mode?

[colltoaction]

I have AoT but not SSR in my project. I think template isn't updated to v4.
Mark was working on integrating all these pieces but I think he doesn't
have a full template yet.

On Thu, Mar 30, 2017, 00:46 Mark Perry [e-mail] wrote:

@tinchou https://github.com/tinchou Does the V4 Template have AoT
support built in when running in production mode?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aspnet/JavaScriptServices/issues/508#issuecomment-290329859,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABeg9AH9LKLkyC4F2y7fPZetwUsdeQKbks5rq13ggaJpZM4LLAG8
.

[MarkPieszak]

Working on it today here haven't added AoT just yet but should have some later today to get that in there! We have full SEO (meta title links) at least now 🎈

[k-vekos]

I'm a little confused, is webpack integration not already providing AoT compilation?

[MarkPieszak]

Not unless you're using @ngtools/webpack, and you have the duplicate main.server file (that specifies an NgModuleFactory and platformServer() instead), also duplicate tsconfigs to setup that different server specifications. Also your webpack has to be configured to handle these scenarios as well.

There is a PR in review that will update ngtools/webpack to be able to automatically handle and create those duplicate main.server files (the same way it does with main.browser), so hopefully that will land on npm soon. You can see all of these things in action here.

Hopefully when things get easier I'll be able to talk with @SteveSandersonMS and we'll get a PR into JavaScriptServices as well to handle these for everyone!

[SteveSandersonMS]

AoT compilation is now included in the latest Angular template. This applies to both server and client builds, but only for production builds (because it makes the build much too slow to apply for dev builds).

@MarkPieszak The commit that brings in this new functionality is https://github.com/aspnet/JavaScriptServices/commit/51915318135e3da7b5c9c45144aa3c69084c4594. Would you be willing to look at the changes in that commit and let me know if you have any opinions on how this has been implemented? If you have any concerns let me know!

The effect of adding AoT is that the starter site (with gzip enabled) goes down from about 450KB to about 320KB (still including bootstrap/jquery, which are themselves a big chunk of this). So it's not an amazing reduction, but is worth having at least. It also speeds up server-side prerendering by a factor of 2-3.

[MarkPieszak]

@SteveSandersonMS Excellent, I just spent the past few days getting to that same point as well, I was about to contact you! Beat me to it 👍 👍

I tried a few other ideas with AutoDllPlugin, ngc-webpack etc, but maybe those will help us later on.
I'll take a look, so far things look great. If anything else I'll open a quick PR.

How can we get preview3 by the way, can't find it anywhere.

[alienlike]

Can the Microsoft.DotNet.Web.Spa.ProjectTemplates package mentioned above by @SteveSandersonMS be used directly, or must we wait for it be bundled with Microsoft.AspNetCore.SpaTemplates? I was able to install the templates, but dotnet new angular throws an exception Option variant - for canonical TargetFrameworkOverride was already defined for canonical skipRestore.

[SteveSandersonMS]

@alienlike The Microsoft.DotNet.Web.Spa.ProjectTemplates package is shipped as part of the .NET Core 2.0 SDK (as of preview 3). So if your .NET Core installation is new enough, you already have the templates. You can't use it with older .NET Core SDKs as it specifically depends on tooling and runtime features in 2.0.