Posted on by admin

What-is-New-in-Angular-11

Angular is an open-source web app framework. Angular is rewrite from the same team that built AngularJS. The team announced separate terms for that, so that should be used for the name of each framework with “AngularJS” referring to 1.X, and “Angular” without “JS” referring to the versions 2 and up.

Angular has just released version 11.0, so let’s explore new features of Angular that just got released. This version has updates across the platform including framework, CLI, and components. In this blog, we are going to introduce you to the features of Angular11. Let’s start the tour!

Hot Module Replacement (HMR) Support

Hot module replacement is a mechanism that enables modules to be replaced without a full browser refresh. With Angular 11, it will reduce your efforts to configure the HMR in your application. They have provided a CLI command to configure the HMR.

You just use the “ng serve” command with an “hmr” tag to enable HMR.

Faster Builds

Angular 11 has updated some key areas for faster development and compilation.

  • NGCC update process is now 2–4x faster.
  • Faster compilation with TypeScript v4.0.

Webpack 5 Support

With the latest version of Angular, you can use Webpack 5. It will help to build faster and even smaller bundle sizes. This is experimental keep in mind. To enable Webpack 5 in your project just add the following package in your package.json file.

“resolutions”:{
“webpack”:”5.4.0″
}

“The Angular Language Service provides code editors with a way to get completions, errors, hints, and navigation inside Angular templates. It works with external templates in separate HTML files, and also with in-line templates.” — Angular’s documentation

The latest update of Angular is providing a powerful Ivy based language service and it is still in development. It behaves similarly to the TypeScript compiler.

webpack-logo

TypeScript 4.0

Angular has dropped support for TypeScript 3.9 and now it only support TypeScript 4.0

TypeScript-image

Upgrade to Angular 11

To update your Angular project to latest version just need to execute this command.

ng serve –hmr

Component Test Harnesses

Component Test Harnesses released in Angular 9 release. It was introduced to interact with the Angular Material component while testing using a supported API.

Angular 11 update enables interaction with all types of components and it will help more developers to create robust test suites.

Automatic Inlining of Fonts

It will help to speed up the first contentful paint. Angular CLI will download the inline fonts we are using and link in our application. This feature will be enabled by default.

TSLint  toESLint

Recently TSList was deprecated, it was the popular linting tool. Now we have to migrate from TSLint to ESLint.

For detailed migration steps go through a third-party solution and migration path via,

    • typescript-eslint
    • angular-eslint
    • tslint-to-eslint-config

TSLinttoESLint-image

Language Service Preview

ng update @angular/cli @angular/core

For more detail and guidance on updating your project to Anuglar 11 visit  update.angular.io

Conclusion

These are just few of the advancements that Angular11 comes up with. There are much more features and detailed insight into Angular 11 that our team at Zobi Web Solutions can provide if you wish to consult us on same. Zobi Web Solutions is a prominent Angular development company that has already proved itself by providing excellent services for AngularJS Development. Our team has already adopted Angular11 and its best practices to get itself qualified as one of the best Angular11 Development Company.