Upgrade Angular template to 2.4.4

[EduardTheThird]

Resolves #406 where Angular template could not be updated to Angular 2.1.1.

[dnfclas]

Hi @EduardTheThird, I'm your friendly neighborhood .NET Foundation Pull Request Bot (You can call me DNFBOT). Thanks for your contribution!

This seems like a small (but important) contribution, so no Contribution License Agreement is required at this point. Real humans will now evaluate your PR.

TTYL, DNFBOT;

[MarkPieszak]

Did you make sure to rimraf ./node_modules && npm i, re-run webpack & vendor webpack bundles?
Universal should throw a TypeError: Cannot read property 'SelectorMatcher' of undefined since it's currently pinned at 2.1.0.

The available workarounds don't work on 2.4.x unfortunately, but I'm hoping we get 1 last release of angular2-universal so that it works until we move (the main engine) everything into Angular Core itself.

[EduardTheThird]

Hi @MarkPieszak

I was able to upgrade to Angular 2.4.4 while keeping prerendering disabled. Obviously this is not ideal and breaks an important part of the Angular 2 template and only masks the angular2-universal SelectorMatcher error, so feel free to reject and abandon this PR! We need Angular 2.4 for the UI controls we would like to use, thus this temporary workaround 🤕

After generating a new Angular 2 template, I made the changes as per this PR and ran the following:

1. rimraf ./node_modules
2. npm install
3. webpack --config webpack.config.vendor.js
4. webpack
5. dotnet build
6. dotnet run

[SteveSandersonMS]

Thanks for the suggestion @EduardTheThird.

As I think you can guess, we won't be able to merge this since it works by entirely disabling a major feature (server-side prerendering). We will certainly update to the latest version of Angular as soon as Angular Universal support permits.

[JohnGalt1717]

From what I can tell with Angular Universal they're punting on new builds and just commenting in tickets that it will be supported in V4. That means a complete freeze on new angular builds until V4 comes out. Ouch.

[SteveSandersonMS]

@MarkPieszak Do you think you could try to find out if/when we can realistically expect an update to Angular Universal to support newer versions of Angular?

If it's potentially a while off, we might need to remove Angular Universal from the templates to allow an update to a newer version of Angular, because being stuck on the old one will become a bigger problem than losing server-side prerendering.

[MarkPieszak]

Sure let me get back to you guys! @SteveSandersonMS @JohnGalt1717

I've been pushing to get a final release under the old angular2-universal prior to the move to Core that works with 2.4.x 👍🎈

[JohnGalt1717]

Any word on this? We're trying to decide direction on a new project at the moment so time is not on my side.

[MarkPieszak]

@JohnGalt1717 Apologies for the delay!
You'll be fine using it (even if you don't want to use the workaround file to be able to use the latest 2.4.5 version. Look in this folder, grab the __2.1.1.workaround.ts file, and import it at the TOP of your boot-client & boot-server files, and you can update to the latest Angular. You can update rxjs to 5.0.1 & zone.js to 0.7.2 as well if you'd like.

In a month we'll have Universals core serialization engine inside of Angular Core itself, but you'll be fine getting started now.

@SteveSandersonMS Would you want me to implement the workaround here or would you prefer Universal to support the latest version on its own?

[SteveSandersonMS]

@MarkPieszak It would be great if Angular Universal had your workaround built-in so that we could consider 2.4.5+ support to be a native feature. Is there any chance of publishing a release that includes that?

In the meantime, I've published an update to generator-aspnetcore-spa (version 0.8.1) that uses your workaround to offer the option to produce Angular 2.4.5 projects. It's displayed like this:

? Framework (Use arrow keys)
❯ Angular 2.0.2 
  Angular 2.4.5 (experimental) 
  Aurelia 
  Knockout 
  React 
  React with Redux 

... since I don't know whether the workaround is definitely sufficient to support all Angular features. But like I say, it would be better if this fix was natively included in Angular Universal so that we could drop the 'experimental' label and just consider it to be a fully-supported version.

BTW your workaround is in the NPM package angular2-universal-patch so that it's more convenient to import into projects. Hope that's OK!

[MarkPieszak]

Oh great, good idea! We should of pushed out a quick npm package like that to begin with :)

I'm meeting with the guys Friday afternoon to talk about everything, so let me get back to you after that. I'll see if it's possible to get that in there (with everything working properly).
I'm glad you at least have it incorporated in the templates at least! 👍

I'll get back to you as soon as I hear more! @SteveSandersonMS