Welcome to Angular 11

Especially for the start of a new course stream “Fullstack JavaScript Web Developer” We present you with an overview of the new version of the popular JavaScript framework – Angular. The 11.0.0 version is now available and has great updates that affect the entire platform, including the framework itself, the component library, and command line tools. Let’s see what’s in this release.



Byelog Operation Updates

When we shared Angular roadmapOne of the points was Operation Byelog, in which we committed ourselves to significant engineering efforts to sort issues and PR until we have a clear understanding of the community’s needs. Now we can report that the original goal has been achieved! We have sorted all problems in all three monorepositories and will continue this work as new problems are reported.

This is our commitment: thereafter, any new issues reported will be sorted within 2 weeks. In the process of work, we decided several popular problems from router and forms… We also closed third the most popular problem!

We are now planning the next steps to support the Angular community. We will continue to streamline and fix issues and work to improve our processes for accepting community contributions.

Automatic font embedding

To make your applications even faster by speeding up their primary renderings, we are introducing automatic font embedding. At compile time, the Angular CLI will download and embed the fonts that are used in the application. We’ll enable this by default in apps built with version 11. All you need to do to take advantage of this optimization is update your app!

Component Testing Tools

In Angular v9, we introduced component testing tools. They provide a solid and legible API to help you test Angular Material components. This gives developers the ability to interact with Angular Material components using a supported API during testing.

Since version 11 we have tools for all components! Developers can now create more robust test suites.

We’ve also improved performance and added new APIs. The parallel function simplifies working with asynchronous activities in your tests by allowing developers to run multiple asynchronous interactions with components in parallel. The manualChangeDetection function gives developers access to finer control over change detection by disabling automatic change detection in unit tests.

For more details and examples of this API and other new features, be sure to check out documentation by Angular Material Test Harness!

Improved reporting and logging

We made changes to the reports at build time to make them even more useful during development. We are bringing updated output to the CLI to make logs and reports easier to read.

Improved CLI output formatting

Preview of the updated Language Service

The Angular Language Service provides useful tools that make developing with Angular productive and fun. The current version of the Language Service is based on the View Engine, and today we will take a quick look at the Ivy-based Language Service. The updated Language Service provides developers with a more powerful and accurate experience.

The Language Service will now be able to correctly define generic types in templates just like the TypeScript compiler does. For example, in the screenshot below, we can infer that the iterable is of type string.

Angular Language Service inferred duplicate types in templates

This powerful new update is still in development, but we wanted to share an update as we continue to prepare it for its full release in the next version.

Updated support for Hot Module Replacement (HMR)

Angular offers HMR support, but enabling it required configuration and code changes, which made it not very convenient to quickly incorporate into Angular projects. In version 11, we updated the command line tools to allow HMR to be enabled when running the app with ng serve. First, run the following command:

ng serve --hmr

After the local server has started, the console will display a message confirming that HMR is active:

NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.

Here here you can get information about working with HMR for webpack.

Now during development, the latest changes to components, templates and styles will be instantly updated in the running application. And all this without having to completely refresh the page. The data entered into the form, as well as the scroll position, are saved, which improves developer productivity.

Faster assembly

We are accelerating the development and build cycle by making updates in some key areas.

  • When installing dependencies, the ngcc update process is now 2-4 times faster.
  • Faster compilation with TypeScript v4.0.

Experimental webpack 5 support

Teams can now use webpack v5. Currently, you can experiment with Module Federation… In the future, webpack v5 will show:

  • Faster builds with persistent disk caching.
  • Reduced bag size thanks to cjs tree-shaking

Support is experimental and under development, so we do not recommend using it in production.

Want to try webpack 5? To enable it in your project, add the following section to your package.json file:

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

Currently you need to use yarnto use this as npm doesn’t support the Resolution property yet.

Linting

In previous versions of Angular, we supplied a default linting implementation (TSLint). TSLint is now deprecated, project creators recommend switching to ESLint. James Henry worked with others in the open source community to develop a third-party solution and way migrations with typescript-eslint, angular-eslint and tslint-to-eslint-config! We are working closely to ensure a smooth transition for Angular developers to a supported linting stack.

We are moving away from TSLint and Codelyzer in version 11. This means that the implementation for linting Angular projects will not be available in future releases.

Go to the official the page project to learn how to include angular-eslint in your project and switch from TSLint.

Cleaning

In this update, we are discontinuing support for IE9 / IE10 and IE for mobile. IE11 is the only version of IE that still supported Angular. We also removed obsolete API and added several functions to the deprecated list. Be sure to check it out to make sure you’re using the latest APIs and following our guidelines.

Roadmap

We’ve also updated roadmapto keep you on top of our current priorities. Some of the announcements in this post are updates to ongoing projects from the roadmap. This reflects our approach to progressively rolling out larger efforts and allows developers to provide early feedback that we can include in the final release.

We’ve partnered with Lucas Rubbelke from the Angular community to update the content of some projects to better reflect the value they bring to developers.

Upgrading to Angular 11

When you’re ready to go, run this command to update Angular and CLI:

ng update @angular/cli @angular/core

Visit the resource update.angular.ioto find detailed information and upgrade guidance. We always recommend that you always upgrade to only one major release in one upgrade step to get the best upgrade experience.

And with a promo code HABR you can get an additional 10% to the discount indicated on the banner.

image

More courses

Recommended articles

  • How to Become a Data Scientist Without Online Courses
  • 450 free courses from the Ivy League
  • How to learn Machine Learning 5 days a week for 9 months in a row
  • How much data analyst earns: overview of salaries and vacancies in Russia and abroad in 2020
  • Machine Learning and Computer Vision in the Mining Industry

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *