Angular 7 in the House!
A quick look at some of the new stuff in Angular version 7
AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!
Angular 7 was just released on October 18. I’ve had some time to take a look at it. So, I just wanted to mention a few of the things I noticed.
As usual, Stephen Fluin has done a great job of explaining the changes on the Angular Blog. You will want to read his article titled:
Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more
Remember, that is just the highlights. If you want to see all the details, you will want to take a look at the Angular CHANGELOG.
Updating to Angular 7
The good news is that this seems to be a much easier upgrade than going from Angular 5 to version 6 was. So far, I haven’t needed to make any significant changes in the experiments I’ve done on some existing projects.
If you remember, the main difficulty in updating to Angular 6 was moving to RxJS 6. Since RxJS is still on version 6, we don’t have that major upgrade to deal with.
Furthermore, I went through the code examples in my own articles and I didn’t have to modify any of the code that was based on Angular 6.
Angular.io
Since the release, they have made two significant updates to the Documentation section of the Angular website at angular.io:
- The Angular CLI Documentation is now an official part of the angular.io website. This continues the strategy of making Angular CLI an integral part of the Angular offering and not just a nice supporting project.
- They added a Release Information section that specifically addresses issues about new releases and how to update your projects.
If you have any questions about what you need to do, the Angular Update Guide has answers for you.
Core Dependencies
Angular has two core dependencies: RxJS and TypeScript.
- RxJS 6.3
Angular 7 uses RxJS version 6.3. As we discussed previously, this shouldn’t cause us any real headaches as we were already using RxJS version 6 in Angular 6. - TypeScript 3.1
Angular 7 uses TypeScript version 3.1. Although this is a major upgrade from Angular 6 which used TypeScript version 2.9, I haven’t yet seen anything that needs to be changed. For more details you can review the TypeScript CHANGELOG.
Ivy
Sorry, nope. No Ivy, not yet. The long awaited rendering engine didn’t make it into this release. However, don’t despair. There is a flag in the ng new command--experimentalIvy. To try it out you can use:
ng new myApp --experimentalIvy=true
I haven’t had a chance to try this out yet. But, setting it to true will create a new Angular workspace which uses the experimental Ivy rendering engine.
Furthermore, if you want a good primer on how to get started understanding the internals of Ivy, you should check out the excellent article by Max, Wizard of the Web.
Angular Material
Angular Material continues to make huge progress. Angular 7 will make some minor changes to the way your Material GUI looks.
One of the most interesting additions is support for Drag and Drop. For more information about this, check out Tim Deschryver’s fantastic article:
Exploring Drag and Drop with the new Angular Material CDK
--createApplication Flag
The --createApplication flag is used with the ng new command. Setting this to false tells ng new not to create the initial Angular application in the Workspace. By default this flag is set to true to match the behavior of the previous versions of Angular CLI.
Here is how it is documented on angular.io:
To understand the when and how to use this flag check out my article:
Angular Workspace: No Application for You!
Upcoming Releases
The Angular team has posted a plan of major updates every 6 months. At the time of this writing it looks like this:
Working with Angular 7
My recommendation is to move your projects to Angular 7 as soon as you can twist your boss’s arm enough to let you.
In the meantime, you are going to be dealing with projects in both versions 6 and 7. So make sure you review my article that explains how to work with multiple versions of Angular CLI:
