Update to Angular 4.0.0

[ghost]

Angular 4.0.0 has now been released http://angularjs.blogspot.com.au/2017/03/angular-400-now-available.html with some good improvements

[MarkPieszak]

Still a few things to work out in the integration, but here's what I have so far with .NET and Angular 4. I've started work in this repo (https://github.com/MarkPieszak/aspnetcore-angular2-universal) for now, but imagine it'll get into here soon enough

[ghost]

Wow! Thanks @MarkPieszak Wrongly assumed it was essentially a package update, with v2 to v4 meant to be basically non breaking

[MarkPieszak]

Yeah it's quite a bit more, also starting the process differently (now in the Controller) so that we can give .NET the other essential SEO data.

Of course, if you don't care about server rendering, you can just shut it off and update to 4.0 real easily :)

[peterdobson]

Fantastic! Just had to change the port number in fetchdata.components.ts from http://localhost:5000/api/test/users to http://localhost:1780/api/test/users to get the fetch-data sample working.

[MarkPieszak]

Yes so that eventually that'll be set dynamically from the server wth DI, going into Angular, just one of the improvements needed! URLs must be absolute on the server, previously we patched them for you in Universal.

[skorunka]

After upgrading to Ang4 i get this error hile runnign webpack on webpack.config file:

ERROR in [at-loader] ./node_modules/angular2-universal/node_modules/angular2-platform-node/node-platform.d.ts:1:10
    TS2305: Module '"C:/Projects/EYC/Solutions/Anticipate/src/Eyc.Solutions.Anticipate.Ui.Web.2/node_modules/@angular/platform-browser/platform-browser"' has no exported member 'AnimationDriver'.

Any idea? Than kyou.

[MarkPieszak]

You actually can't just update the current project here to Angular4 my apologies. It takes re shifting and removing a lot a lot of things, pull down that branch I pointed to @skorunka and try to port your app to it.

Honestly though I'd suggest waiting a little bit until it's more cleaned up!

[skorunka]

@MarkPieszak No worries, I understand. Thank you for advice, i will give it a try.

[seven1986]

AOT

@starquake , sorry. AOT = ahead-of-time https://angular.cn/docs/ts/latest/guide/glossary.html We all expect officially asp net core angular upgrade to 4.0!

[starquake]

@seven1986 I'm sorry, what does 'AOT' mean?

[michelebombardi]

@MarkPieszak Will you let us know here when you've done?

[ns8482e]

@MarkPieszak For angular 4 branch you pointed is still using es6-shim. Is there any plan to update it to core-js?

[MarkPieszak]

Sure, I'll ping everyone when it's all finished. @bm-software Yes there's a lot that needs to be updated along with core-js, such as AoT etc.

For now that branch is bare bones but sometime in the next few days I'm hoping I can find a good bunch of hours where I can focus on it and get it into Masters with everyone fixed up in it.

[skorunka]

@MarkPieszak You are our hero!

[ghost]

@starquake , Ahead of time compilation. I'm a noob, but essentially precompiling the entire angular app before even hosting on a server. It increases performance since the angular compiler no longer needs to render the templates. It also offers a feature called tree-shaking that reduces the size of bundles since the UI is rendered during compilation and things not used are not included.

[zihotki]

@MarkPieszak do you plan to include angular-cli into the template? If so, are you going to use AoT and other functionality from angular-cli? I'm asking because angular2 template had some custom functionality which is now supported by official angular-cli

[MarkPieszak]

The problem is that because we are trying to do server side pre-rendering, this breaks away from the use-case of the CLI. The CLI is helpful if you just want a normal client side application and your Rest API is a separate all together entity. Here, the goal is to unify them and .NET be aware of the application as well as aid in serializing it to a string (thus giving us the Prerender ability, since that's only available through Node, and Steve created an incredibly easy way to invoke node within .net core)

AoT will definitely be a part of the template as well, I haven't talked with @SteveSandersonMS yet about the plans for having it here as well, but once I clean a few things up i could make a PR to include it Steve?

At the end of the day the only thing we'll be missing compared to the CLI is the generators, but you could write those in just about any scripting language, even something as easy as Gulp if you wanted to write one.

[michelebombardi]

I'm trying to rapidly update my vs2015 project to use it with vs2017 but I'm getting the following errors:

Is there a quick fix for that? The project structure is the default one with ClientApp folder inside the project root folder

[zihotki]

For me actually the most missing feature in JSS is ability to use generators. It's possible to quickly create some custom generators but they will need to be updated to reflect changes in cli, etc. So if it's possible to reuse at least generators parts that would be great even if we will miss such things like 'ng serve'.

[AndeyR]

Any updates ?

[MarkPieszak]

It's all in here at the moment, I'm working on AoT in a different branch but having some strange issues (might be ngtools related).

It has dev & regular prod builds though, and most other things all work now. You could take it and just drop your /app folder in, don't delete the existing /app folder, as you need browser- & server-app.module files.

Hopefully have even more done today/tomorrow as ngConf starts tomorrow. @AndeyR

[AndeyR]

@MarkPieszak Thank you )

[cspaniard]

@MarkPieszak great news!!!

Starting a new project soon and I can´t wait to use the new templates for Angular 4

TIA, David

[skorunka]

@MarkPieszak Hi, could you please be more specific on how to migrate the previous version into this new one? For example, I don't know what to do with "webpack.config.vendor.js". Thank you.

[MarkPieszak]

I'll have to add those (or some variation of them) back in, I was just keeping things simpler as I was trying to update everything. Getting some small issues with AoT. Takes time to get all this in there & working perfectly.

Honestly I'd wait a little bit unless you want to experience some growing pains as it evolves. Still trying to get a few things working, thankfully there's a few contributors helping with things here and there as well. There's a lot to figure out.

[skorunka]

@MarkPieszak I see, I will wait with the upgrade until it is done. Thank you.

[skorunka]

@MarkPieszak In which branch you guys are working? Master or ng4 or angular4.0-NEW-wip?

[MarkPieszak]

I just deleted those 2 branches (and any other stale/old ones), Master has the latest right now. It has a build build you can run normally, AoT build as well for when you publish or push to Azure.

Some important things left to finish, and I'd say it's good to go (at least for now) are:

• [ ] I still need to tweak & fix the aspnetcore-engine so that it uses that (instead of a temporary one inside the project)
• [ ] Add back vendor code-splitting etc
• [ ] See any other optimizations that could be made in webpack AoT prod build
• [ ] Fix bootstrap-sass icon errors happening on the browser

[skorunka]

Does AoT in your context mean Ahead of Time?

[MarkPieszak]

Yes :)

[skorunka]

Alright, was not sure ;) BTW After upgrading to VS2017, for some reason, if we make any change in TS, it get compiled(that's what browser log says) but the change is not propagated to the browser. It only happens with a TY files, if we change a Angular HTML template, all works fine. Dont you have any clue on that? ta

PS: what helps is a full VS build

[swaner]

@skorunka You have to add TypeScriptCompileBlocked=true to .csproj in order to stop VS to compiling .ts files: <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

More info: http://stackoverflow.com/questions/40667665/how-to-prevent-visual-studio-2017-from-build-javascript

[MarkPieszak]

@skorunka Strange I have that (ts block tag) in the Repo, guessing you're talking about converting/upgrading your own project to 2017

[skorunka]

@swaner That helped! @MarkPieszak Im still using Angular2 version.

[skorunka]

@MarkPieszak Hi Mark, how does it look with ng4 update? Thank you.

[MarkPieszak]

It's actually going fairly well, vendor splitting should be added sometime the next few days, I'm adding TransferData back in later tonight, which helps set the window object with things you want transferred.

You should be able to start using / playing around with it safely very soon 🎈 You could try now if you wanted to get more familiar with it, be great to have some more feedback or help from the community 🎁 Sorry for any delay its been a very busy past few weeks!

[skorunka]

@MarkPieszak Cool! Good to hear it is going pretty well. i can not wait to upgrade to ng4 and have all the sweets in one place. I would love to contribute, but my webpack/angular knowledge is still very limited. Thank you for your hard work and keep going! Good job.

[tanwarsatya]

@MarkPieszak very much appreciate all the good work towards ng4.

[stalek71]

Hello @MarkPieszak could you add some working test case also (unit test file) to use as a starting point for our own unit tests? The current one config I use (for Ang 2.4 yet so in "old" template) doesn't work. When I run Karma then Webpack claims it doesn't know Set, Map and similar definitions. It looks like an issue with a compilation against ES5 (missign ES6 libs or polyfills ???) The app starts without any problems of course (and publishing it through WebPack doesn't show any problems during building/boundling also). Maybe I just do something wrong way?

[cspaniard]

@MarkPieszak Great to hear things are going well..

No pressure, but any updates on this issue... ? We are about to start a new project and it would be great to have this...

TIA, David

[MarkPieszak]

I mean everything is basically working, you could start using it and building your app, any updates that come from now on won't be touching the Client or Server folders, they will be build system (webpack etc) updates, so you could just as easily pull down latest, and port your app over (or follow commits)to get the latest bundling updates / chunking updates etc. I need to fix these and add DLL chunking to improve build performance and HMR speed.

Maybe wait a few days so I can get the vendor chunking / CSS extraction / any other things like that out of the way. Otherwise you could always use get going and fix up webpack however you'd like!

• All SEO and HttpTransfer (server -> client) is finished.
• Title, meta even link (canonical, hreflang, etc) are finished.
• You have your separate Browser and Server NgModules. App.module is where you'll import almost everything.
• HttpTransfer is included and functioning, you use it when you want an http call to not get re-ran during the client render. (No flicker this way, only use it for important GETs)
• At the moment there is still redundant main.server and main.server.aot files, but once a PR goes into ngtools/webpack, it'll handle the AoT one automatically.
• There are things documented in HomeController that you can see how the server rendering gets started, and also how we are transferring things.
• We have ORIGIN_URL and REQUEST tokens now. (Remember the server doesn't know relative paths anymore). You can't just don't http.get('/API/whatever') so ORIGIN_URL is there to inject and use for when you have your API in the same project (such as these repos)

Plenty of other things

• I'm waiting to merge and publish to npm the ng-aspnetcore-engine into Universal (https://github.com/angular/universal/pull/682) which will replace the temp one find inside the project)

You can see a Readme here on how everything works now: https://github.com/MarkPieszak/universal/blob/54dec51f09fa0f13743fe92bd822866fff1267e1/modules/aspnetcore-engine/README.md I'm sure I'll be updating it more soon as well.

@SteveSandersonMS maybe you have some time this week, and we can go over everything together, see if there's any other way from the .NET side we could improve the developer experience here? I'll shoot you an email.

[cspaniard]

Hi @MarkPieszak

Great, great news... and wonderful explanation...

Thank you so much for your great work...

[skorunka]

@MarkPieszak Hi Mark, it seems https://github.com/angular/universal/pull/682 was merged, do you plan to update the code accordingly? We are struggling with HMR rebuild speed at the moment, it takes 20 sec, do you think the above might help?

[danobri]

@MarkPieszak - I'm guessing you are aware, but Angular 4.1.0 is out now as well - http://angularjs.blogspot.com/2017/04/angular-410-now-available.html

Any status updates? Thanks for all your work on the project!

[paddyza]

Hi @MarkPieszak. Do you perhaps have an ETA for when your changes will be merged? Thanks!

[binoypatel]

Knowing ETA is super important for planing the production, please share your roadmap,

many thanks,

[lee-alderdice]

Finding this thread is a life saver. Thanks so much all, been tearing my hair out for the past 3 hours trying to upgrade the template. Being an Angular noob wasn't helping either.

[SteveSandersonMS]

It's great to see this discussion and especially @MarkPieszak's progress with the update. Hopefully this is something we can proceed with pretty soon.

I think the most stable way for us to proceed with the changes is incrementally. Rather than making a massive set of dramatic changes all at once (e.g., all the stuff in @MarkPieszak's repo), I'd like to start with the minimal set of changes needed to make Angular 4 work correctly on both server and client, without necessarily adding new features such as the SEO stuff or AoT compilation. Then, we can add the new functionality piecemeal. In the meantime, people can get on with updating their existing apps to Angular 4 without having to wait for every last detail about how the new stuff will work. Hope that sounds OK to everyone!

I'm about to post a pull request that includes what I think is a minimal set of changes needed for Angular 4. Hopefully I'll also be able to put a prerelease version of generator-aspnetcore-spa onto NPM so that people can easily try it out without having to build the repo from sources.

[JohnGalt1717]

THAT WOULD BE FANTASTIC! Thank you!

[dennyio]

Thanks!