angular-7.0-top-4-changes
Angular 7 is just released and if we talk about new features, it looks a little light. There are some great features to improve performance as well as some very interesting new tooling changes in website development domain. And continuing the recent trend from previous versions, Angular is faster than ever.

Now let’s talk about the new features in this release before we start building a new Web Application in the all new Angular.

1. CLI Prompts

The Angular team has discretely focused in improving the tools available to website developers and the new CLI prompts are no different. Usually, we used to run commands like ng new or ng add, it’s a single pass. Before, what if you forget to include routing? Ah, damn it! Want to skip the installation process? Well, you can always terminate the command.

This time Angular team has taken care of it. Now the CLI responds with prompts. Simply try ng new myapp7 and now what you get is a brand new prompt asking if you would like to add routing. Want to try a different stylesheet format? Not an issue. The CLI will let you select between CSS, SCSS, SASS and more (or actually LESS HAHA!). And the breaking news, it’s customizable! We just need to add a schematic.json using the Schematic CLI and you can instruct Angular CLI which prompts to execute!

2. The Angular Material CDK

Scrolling Module

As many other mobile frameworks have made advancement towards dynamically loading data such as long lists or images, Angular too has taken initiative by adding the ScrollingModule to facilitate virtual scrolling. As elements are virtually loaded and unloaded from the DOM as they gain or lose visibility. Performance has been drastically increased for the user’s experience. Henceforth when you have a potentially large list of items for your users to scroll, you just have to wrap it in a cdk-virtual-scroll-viewport component and take advantage of the performance boost!

DragDrop Module

Now you can completely stick with Angular Material module and implement drag and drop support including reordering and transferring items between lists. The CDK incorporates automatic rendering, drag handlers, drop handlers and even the potentiality
to transfer data. Ok, now if you don’t like the animation. Not an issue. It’s Angular we are talking about; it’s yours to override.

3. Application Performance

Now it would be cliche to say: Angular 7 is even faster than previous versions, but trust me it is ! The upgrade is faster (less than 10 minutes for many apps according to the official announcement), the framework is faster, the virtual scrolling CDK module that I mentioned earlier runs with better performance.

Here is where things get interesting: Angular is not only about making the framework as small as possible, it’s also committed in making your apps as small as possible!. V7 automatically removes reflect-metadata polyfill in production, it used to be a common production mistake.

New projects henceforth use Budget Bundles by default which notifies you when your app is reaching size limits. You also get warnings when you reach 2MB and errors at 5MB, and I think that’s insane!. And when you need adjust a little more space, just go to your angular.json and make necessary adjustments.

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

 

4. Updated Dependencies

Angular is up to Typescript 3.1, RxJS is up to 6.3 and Node 10 support has been added!
Checkout the official documentation page for more information.

5. Ivy Renderer

The next generation renderer has not been released yet. The current version of it is out right now so people give it a try early, but it is not being used officially by Angular yet The Angular team won’t commit to a final timeline but the development is still in process. They have made note that backwards compatibility validation is beginning and while no official team member has commented yet. Don’t worry you can follow the progress yourself on the GitHub Ivy Renderer issue under the official Angular repo.

Now the good news part. They fully expect that Ivy can be released in a minor release as it’s fully tested and validated. So let’s keep our fingers crossed !

6. Upgrading

Now this is going to blow your minds and make you think, how could it be this easy ?

Let’s assume you’re already running on Angular 6 and RxJS 6, you simply have to have to run a single command:

$ ng update @angular/cli @angular/core

And if you’re using Angular Material, just run this command:

$ ng update @angular/material

If something seems unusual, make sure you visit the Update Guide and you get all the help you need.

What Let’s Nurture offers for Angular App Development?

As a leading website and mobile application development company, you must be having a routine requirement of building Single page applications. Therefore, while you manage the development of the other functionalities of your Project, a skilled development partner can look after your development tasks.

Let’s Nurture, has been prominent for almost a decade in the domains of custom single page web applications development and mobile app development. We provide custom Business Solutions that adds significant value to your development needs. We understand the custom requirements such as high end performance enhancement (i.e. single time load of html css and JS), custom API & Web development services are essential for quality deliverables. With Let’s Nurture, you have flexible engagement models to hire dedicated MEAN Stack developers who have been experts with tons of experience that you need.

Have something to share on the same or wish to hire MEAN stack ( Angular ) developers from Let’s Nurture? Get a quote after FREE consultation. Share your thoughts with us on Twitter and Facebook. We will be happy to have a discussion on the same.

Happy Coding 😉

krunal sojitra

Giving up is always an option, but it's never MY CHOICE.

Want to work with us? We're hiring!