Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      Franklin Templeton
      Franklin Templeton
      The Container Store
      The Container Store
      KPMG
      KPMG
      Academy Sports & Outdoors
      Academy Sports & Outdoors
      Shell
      Shell
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      United Parcel Service
      United Parcel Service
      AdviceWorks
      AdviceWorks
      NatWest Markets
      NatWest Markets
      Bridgestone
      Bridgestone

      Technologies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang AI & ML Data Science Java
      Python Salesforce DevOps Block Chain Mobile App Embedded & Hardware
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      Innovate

      Blockchain Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Agile & DevOps Cloud - Bacancy Combalt Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller AC Charger Explore All

      not list

      CCS2 Controller DC Fast Charger AC Charge Controller
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
hire us

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

06

World wide offices

10+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Technologies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Agile & DevOps
      • Cloud - Bacancy Combalt
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • CCS2 Controller
    • AC Charger
    • DC Fast Charger
    • AC Charge Controller
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
New Angular 11

What’s New in Angular 11? (Highlights of Angular 11 Features)

Riken Solanki
Riken Solanki Content Lead
Last Updated on July 15, 2022
December 7, 2020 10 min read

Table of Index

1. Angular 11 Overview

2. What’s New in Angular 11 Announcement

3. Latest Angular 11 New Features

  • Automatic Inlining of Fonts
  • Improved Reporting and Logging
  • Component Test Harnesses
  • Updated Language Service Preview
  • Updated Hot Module Replacement (HMR) Support
  • Faster Builds
  • Webpack 5 support
  • Linting
  • TypeScript 4.0 Support
  • Supports Lazy Loading with Named Outlets

4. Angular 11 Roadmap 2021

5. How to Get Angular 11?

6. Conclusion

7. Frequently Asked Questions

Angular 11 Overview:

Angular 11 release date, features and update.

There’s great news for all Angular followers, developers, and product owners as Angular 11 latest version, has brought in a lot of good features that can come in very handy. If you are wondering what’s new in Angular 11, then let’s have a look forward to, so without wasting any time, let’s get into it. Explore the latest Angular version features and how it can benefit you as Angular developer.

What’s New in Angular 11 Announcement:

Is Angular 11 Stable?

Yes, it is. Angular 11 has become available as a production release on 14th November and the release date of Angular 11 is November 11, 2020. This is Angular 11 stable release date. Moving forward to what is new in Angular 11, it has got updates all across the platform, including the CLI and components and the framework. The Angular 11 version’s significant highlights include router performance improvements, stricter types, automatic in the lining of fonts, and a lot more.

The automatic in the lining of fonts can make the apps faster. The Angular CLI while compilation will download and inline the fonts being used.

Angular 12 is Now Available! Find Out the new Angular 12 features and Enjoy

Latest Angular 11 New Features:

Well, there’s plenty to look forward to in the latest angular version. So let’s dive into Angular 11 features.

Automatic Inlining of Fonts:

One of the new features in Angular version 11 is automatic in fonts’ lining. The angular CLI will now automatically download and inline the fonts that are linked with the application. Going forward, this feature will be enabled by default, which is very helpful for commercial applications or websites as they’re the ones who benefit the most from having better web vitals. It is, however, not an improvement that can help applications that already integrate well-configured service workers. But it is still good to have.

Google Fonts and Icon will be converted to inline in index.html with the flag mentioned below in angular.json under the build option. It is enabled by default. Th use this functionality; it is essential to ensure that the internet connection is available during the build. This has to be kept in mind if developers are running the build on CI.

"configurations": {
  "optimization": {
    "fonts": false
  }
}

OR

"configurations": {
  "optimization": {
    "fonts": {
      "inline": false
    }
  }
}

Source

Improved Reporting and Logging:

Version 11 of Angular has improved the reporting and logging.

Angular 11 changes have been made to the builder phase reporting, which makes it even more helpful during development. New CLI updates have also been introduced in this Angular version, which will make the logs and reports easier to read. This will come as a huge boost to developers as a better way to read logs and reports can save a considerable amount of time and increase efficiency.

Improved Reporting and Logging

Source

Component Test Harnesses:

Component Test harnesses were first introduced in Angular 9. It is known to provide a legible and robust API surface, which helps in testing Angular Material. It gives the developers a great way to interact with Angular Material components during testing. The APIs can interact with the components in a similar way to the end-users, and the tests can insulate themselves from the changes in the DOM.

The latest Angular version has introduced harnesses for all of the components. This makes testing a lot of more-easier for developers. With the latest updates and harnesses for all components, developers can now create more robust test suites.

Besides this phenomenal feature, performance improvements have also been included, and the API itself has undergone quite a significant improvement.

You May Also Like To Read:
Angular Best Practices: Organize Your Angular App With these Practices

The parallel function can now be used to work with asynchronous actions in the tests in an easier manner as it allows the developers to run multiple asynchronous interactions with the components. This saves a lot of time by allowing developers to perform multiple actions simultaneously. This function also takes care of change detection.

The ManualChangeDetection function can be used to control the change detection in a more precise or fine manner by disabling automatic change detection in unit tests. This can help verify the more complicated scenarios. The official doc states that the test harnesses will run Angulars’ change detection prior to reading the state of a DOM element and after interacting with one.

There are some other additional aspects as well that will come in very handy for developers.

  • The CdkVitualForOf now supports Sets. It is now in line with NgForOf as it supports both iterables and arrays and general.
  • A fixed layout is now supported in the CDK table. This option helps in enforcing consistent column widths and optimize sticky rendering styles for native tables.
  • The connected-overlay directive has disabled close input, which helps in configuring whether or not the overlay can be closed by user interaction.

Angular 11 also has a new type of coercion utility that can improve the quality of codes.

Updated Language Service Preview:

The Angular Language Service is very helpful as it provides tools to make development with Angular fun and productive at the same time. The Language service was previously based on the View engine, whereas the latest angular version provides Ivy-based language service, which is more powerful and accurate. It provides a better experience for developers. The language service will now be able to correctly infer generic type sin templates just like the TypeScript compiler does. The feature is still in development and will give a great edge once it is rolled out properly.

Updated Language Service Preview

Source

Updated Hot Module Replacement (HMR) Support:

HMR or Hot Module Replacement is a mechanism that allows the modules to be replaced without a full refresh of the browser. It is not a new feature in Angular and was present in previous versions as well. Developers could use it, but it required configuration and code changes, which made it a bit time-consuming. With Angular 11, the amount of effort required has been reduced significantly as they have provided a CLI command for it.

In this version 11 of Angular, you can just use the ng serve command and an hmr tag to enable Hot Module Replacement. Once the local server starts, the console will show a message as well confirming that HMR is enabled for the dev server. To enable HMR you can use ng serve command

ng serve – configuration hmr

During development, the latest changes to templates, components, and styles will be updated instantly into the running application without a full page refresh. The data entered into forms or scroll positions, etc, remain unchanged.

This is very useful for the developers and boosts productivity greatly.

Faster Builds:

The Angular team is working on a faster development and build cycle by bringing in updates in key areas. While installing dependencies, the ngcc update process is now 2-4 times faster.

The latest updates also allow faster compilation with TypeScript version 4.0.

Webpack 5 support:

As we know that the Webpack can be used to compile a large number of files into a single file or bundle. Webpack 5 is the latest version, which was released just a month or two back. It is undergoing development and fixes and will take some time to be entirely stable.

The latest version of Angular, Angular 11, provides experimental support for web pack 5 and can be used to try out new things. Currently, developers can experiment with the module federation, and in the future, Webpack 5 will clear the path for faster builds with persistent disk caching and smaller bundles. The Angular team believes that they can extend the experimental support very soon, enabling developers to achieve smaller bundles and faster build once things are stabilized.

The Webpack can be used by using yarn and needs to be called using yarn as the npm doesn’t support the resolutions property yet.

"resolutions": {
     "webpack": "5.4.0"
}

Linting:

The previous versions of Angular used TSLint as it has been one of the most popular linting tools among developers for a long time. But now TSLint is being deprecated, and migration is taking place to ESLint.
Angular is also making a shift to ESLint with the latest version, and developers will no longer be able to use TSLint for linting purposes. The use of TSLint and Codelyzer is being deprecated in Angular 11, which means that the default implementation for Linting projects will no longer be available in the future.

A three-step method has been introduced for the migration from TSLint to ESLint.

First, we need to add relevant dependencies using ng add @angular-eslint/schematics.

Next, we need to run the convert-tslint-to-eslint schematic on a project, and finally, we need to remove root TSLint configuration and only use ESLint.

TypeScript 4.0 Support:

In the latest angular version, the team has dropped support for TypeScript 3.9, which was previously used. This version only supports TypeScript 4.0.

This upgrade greatly speeds up the builds-, which is a major reason why Angular 11 ensures greater build speeds in comparison to previous versions.

Supports Lazy Loading with Named Outlets:

In the previous versions until now, named outlets always supported the component, and there was no way to lazy load the module with the use of named outlets. But in the latest version of Angular, Angular 11, you can use it now with ease and convenience.

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
  }
];

Source

Apart from these major changes in Angular 11, developers will find some other changes as well in the current Angular version.

Angular 11 gets several small changes like,

  • Service worker improvements.
  • New automated schematics and migrations.
  • Resolve guards can now be generated by Angular CLI.
  • The formatDate function supports ISO 8601 week-numbering year format.

The Angular team has done some housekeeping as well, where they have removed the support for IE9/IE10 and IE mobile. Only IE11 is now supported in Angular 11. Deprecated APIs have also been removed, and a few have been added to the deprecation list.

You May Also Like To Read:
How to Convert PDF to Image in Angular 11

Angular 11 Roadmap 2021:

The Angular team has also updated the Angular 11 Roadmap 2021 to keep users posted about the current priorities. Some announcements are regarding the updates on in-progress projects from the roadmap. This shows the team’s approach to roll out greater efforts that allow developers to provide early feedback that can be incorporated in the final release. They have collaborated with Lukas Ruebbelke, a member of the Angular community, updating the content of some of the projects, which will better reflect the value developers will get.

This is a great way to get valuable feedback and make necessary changes and updates that will benefit the entire community as a whole.

How to Get Angular 11?

Angular 11 update is pretty simple. When you are ready, all you need to do is run the following command: ng update @angular/cli @angular/core.

To get more information about it, you can head over to update.angular.io, where you will get detailed guidance.

Wrapping Up:

We have already seen the major changes in Angular 11 that have been implemented in the current version of Angular – Angular 11.

They have focused greatly on improving the type of safety and reducing backlogs, which had been a great pain for the community in the past. Hot Module Replacement in Angular will be a major help during the build process and the improvement in types of all pipes can help avoid errors at runtime. One major change that is going to be groundbreaking is Type-Safe Forms, which is currently in progress.

The automatic inlining of fonts is a good feature that can speed up the app-building process.

Angular version 11 is a solid release with just a few tweaks required here and there. The type of safety improvements for pipes and reactive forms is a very exciting update to look forward to. The Ivy-based language service is also something that is going to excite the developers a lot.

The support for TypeScript 4.0 is also great news for all developers and is going to give Angular 11 a significant edge.

Improved Reporting and Logging can help in maintaining logs better and reduce errors.

All the new features the Angular team has introduced is going to come in very handy and make life easier for developers. The changes that are still being worked on will make it even more useful once they are stabilized and rolled out properly.

All in all, it’s a great update to look forward to, and hopefully, the release is going to turn out to be one of the best to date. If you are looking for a helping hand to keep your Angular projects up to date to the latest stable release, get in touch with us today to upgrade your Angular app with our dedicated Angular developers— a lot of optimism and a lot to look forward to, for us.

Frequently Asked Questions:

  • How Can I update to the latest version of Angular 11?

    As mentioned in the blog, you can run the command provided to update it or visit the given link to get a more detailed idea and guidance.

  • Is Angular 11 worth migrating to?

    It is definitely worth migrating to with the new features introduced and the ones that are still in progress. It can substantially benefit developers a lot in comparison to the previous versions.
    For in-detail information on Angular version 11, you can visit the official Angular blogpost.


Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !

Related Articles

Angular with AWS Combination
Ritwik Verma
Vivek Chhatbar

January 23, 2023

AngularJS

All You Need To Know About Angular With AWS Combination

By : Ritwik Verma & Vivek Chhatbar

Quick Summary: Every business owner, whether small or large, explicitly wants what's best for their business. Considering this approach, one thing that is taking a...

15 Minute Read
Read More
New Features of Angular 15
Ritwik Verma

November 30, 2022

AngularJS

What’s New in Angular 15: Deep Dive into Latest Features of Angular 15

By : Ritwik Verma

Quick Summary: The latest version of the most demanded front-end framework, Angular, is here with its latest release Angular 15. This year the Angular Team...

6 Minute Read
Read More
Why use Angular
Paridhi Wadhwani

November 29, 2022

AngularJS

Why Use Angular in 2023? [For Entrepreneurs & Programmers]

By : Paridhi Wadhwani

Quick Summary: Angular has become the first choice of young entrepreneurs who want to modernize their business and make it approachable to the GenZ audience....

14 Minute Read
Read More

india India (HQ)

Corporate House
15-16, Times Corporate Park, Thaltej, Ahmedabad, Gujarat 380059

USA USA

601 Brickell Key Drive, Suite 700, Miami, Florida, 33131, USA

canada Canada

71 Dawes Road, Brampton, On L6X 5N9, Toronto

australia-flag Australia

351A Hampstead Rd, Northfield SA 5085

UAE UAE

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

sweden Sweden

Junkergatan 4, 126 53 Hagersten


Great Place to Work

Get in Touch

call-yellow-icon

Contact Number

+1 347 441 4161

gmail-icon

Email Us

[email protected]


  • Bacancy Behance
  • Bacancy Uplabs
  • Bacancy Pinterest
  • Brochure
  • Quality Assurance
  • Resources
  • Tutorials
  • Customer Reviews
  • Privacy Policy
  • FAQs
  • Contact Us
  • Sitemap
  • Employee
bacancy google review 4.6
bacancy google review
bacancy glassdoor review 4.5
bacancy glassdoor review
bacancy clutch review 4.8
bacancy clutch review
bacancy goodfirms review 4.5
bacancy goodfirms review
X

Get Our Newsletter

Be The First To Get The Latest Updates And Tutorials.

Request A Free Consultation