What’s new in Angular 7?

Angular 7 is here!

But I think google was busy with other things. There are not much features in Angular 7. Basically, they were concentrating mainly on the Ivy project and rewriting the functionality of the angular compiler to make it even better and reliable.

We’ll also discuss what are the new angular/cli features introduced in 7.0.

What’s new in this release?

• Typescript 3.1 support
• Focused on Ivy project ( not a part of this release)
• Rewriting of angular compiler to make it even faster and reliable
• ScrollingModule  & DragDropModule
• Angular Compilation options

TypeScript 3.1

The latest of version of TypeScript is 3.1. Now Angular 7 supports TypeScript 3.1, anyways it is an mandatory dependency of Angular 7.  To know more about TypeScript 3.1, you can refer the official document from Microsoft page.

Ivy Project

The Ivy project is in progress and it will take a few more months to complete it because the Angular team needs to migrate some huge number of projects, where they faced quite a lot of issues. You can able to track the feature in the official feature tracking page.

Some of the interesting pieces of Ivy are,

• ngtsc  – This compiler will compile your angular application and it will generate Javascript from your HTML templates. It’s still under development process.
• ngcc – This tool will explore all the dependencies when you have to convert the existing code into Ivy compatible code. It’s just a newbie feature and under development.

Angular Compilation options

You can able to define the compilerOptions for TypeScript and also angularCompilerOptions for Angular in your tsconfig.json file. But now TypeScript allows you to extend the compilerOptions of another file using extends attribute.

{

"extends":"../tsconfig.base.json",

"compilerOptions":{},

"angularCompilerOptions":{}

...

}

Angular CLI Features

Interactive Prompts

The CLI now provides us some interactive prompts to let the developer choose some options or names. When you run ng new command you will receive some interactive prompts like,

You just have answer for the routing and have to pick up a CSS pre-processor you want, to choose between CSS, SCSS, SASS, LESS or Stylus. You can also deactivate this prompts using ng new angular-demo –no-interactive or ng new angular-demo –defaults.

Angular Flags

A lot of flags have been added to various commands.

– -verbose

• It is now available for both ng serve and ng build.
• In Angular 7, ng serve will be quicker when compared to previous versions.
• It most probably displays how much time each task took, how much each asset weighs, etc.

– -profile

• It can be used for ng build.
• When you run this command, there will be two files generated.
  • chrome-profiler-events.json
  • speed-measure-plugin.json
• The first file is for Chrome profile file, which you can load via the Performances tab in you Chrome Dev tools.
• The second file contains the information of how much time that each plugin took.

– -viewEncapsulation

• It can be used for ng generate component.
• It should be used like ng generate component –viewEncapsulation=ShadowDom to reflect the new view encapsulation method option which was added in Angular 6.1.

– -no-create-application

• It can be used for ng new command.
• When you try to create an application using this command like ng new angular –no-create-application it will create a workspace  with NPM, Typescript, TSLint and Angular CLI configurations, but with no application(src and e2e directories will not be available).

– -minimal

• It can be used for ng new command.
• ng new angular –minimal will create a workspace with a project but with minimum like it will not contain unit tests or e2e tests, no TSLint either and it uses inline styles and templates in components.

– -reporters

• It can used for ng test command.
• It allows us to specify on which reporters we want Karma to use.

Dependencies with Angular 7

Some of the dependencies with Angular 7 are,

• Typescript 3.1
• Node 10 support
• RxJS 6.3

Performance

• Reflect-metadata polyfill in production
• Bundle budgets. You can specify the maximum size of your application in angular.json.

• Advantage of Chrome’s Data Saver features.

FYI

CLI no longer inlines the assets less than 10kb in the CSS. If you have a small image, it will be inlined directly in the generated CSS.

Probable Angular 8 will be released in March! Stay tuned!

That’s all guys!

I hope this blog would be informative. Follow this website for more interesting updates.

Happy Coding 🙂

Cheers 🙂