Everything you should know about Angular 7 - newest Release by Google

It was the just the farewell of 2018 when Google announced the release of Angular 7, just 6 months after the much-hyped release of Angular 6.

The newest version of angular arrived with some significant changes and new features. However, you can safely assume that the buzz this time is mainly because of the improvements in Angular Material 7 platform and in Angular CLI 7.

In addition to that, Google has introduced new features like Scrolling, Drag, CLI prompts, Drop, Virtual etc. for the existing tool chain. Excited to know more? Without any further ado, let’s explore what’s new with Angular 7.

The Hype of angular 7

As per the release plan of the Angular team, they publish a major release every 6 months. This pattern continued and ng7 was released on Oct 18, 2018. In this version, the Angular team has mainly worked on the build size and performance. And continuing the recent trend from previous versions, upgrading is now a breeze (and faster than ever).] Let’s throw some light on the new features and as well as the tooling changes of ng7.

CLI Prompt

Angular team always tries to improve the development tools and the new CLI features are no exception.

Let’s assume one example here. With earlier versions, if you were running the command ng new or ng add, and suddenly you realised that you have missed adding route. Then you would have to terminate the process as early as you can and restart. But in the new CLI prompt, you don’t have to worry about this.

When you run ng new then the CLI automatically prompts, do you want to add route? And the process waits until you select one of the given options (y / N). After that, you can also select the stylesheet format. The CLI will let you select between CSS, SCSS, SAAS and LESS.

$ ng new ng7-starter? Would you like to add Angular routing? Yes? Which stylesheet format would you like to use? CSS? SCSS [ http://sass-lang.com ] SASS [ http://sass-lang.com ] LESS [ http://lesscss.org ] Stylus [ http://stylus-lang.com ]

You can also handle this configuration in a file, by simply adding schematic.json using schematic CLI.

"routing": { "type": "boolean", "description": "Generates a routing module.", "default": false, "x-prompt": "Would you like to add Angular routing?" } Performance

With the Angular team’s focus on the performance, Angular 7 is the highest performing version till date. For example, sometimes, you could add reflect-metadata polyfill by mistake. In the ng7 upgrade, ng team specially addressed this. So if you upgrade your application to ng 7 then you don’t have to wprry about that. Reflect-metadata will be automatically removed in production, but as usual stay in the JIT mode.

After making a production build, do you always check the bundle size? Forget about that, in ng7 your application will warn if the bundle size limit will cross 2MB and you’ll get error if it cross 5MB and you can also configure these size limits in angular.json.

Read more...

I am a Digital Marketer for 2+ Years and currently working at Logic Square Technologies. Which is a renowned Digital marketing, Web, and Mobile application development Company in USA.