Introduction

Development is progressing on Angular 11, a planned upgrade to the Google-developed web framework, with five beta announcements delivered in September. The intended additions include router performance improvements and the removal of support for some Internet Explorer browser versions. As part of the development process, the team started to sort through the backlog of issues to better understand and fix many bugs over the years.

What’s in this release?

With this latest release, apps are developed faster by speeding up the first contentful paint. While compiling the Angular application, the CLI will download inline fonts being used and linked in the application, which needs to be updated.

Angular version update 11 is here with some significant updates for every Angular developer, such as removing support for IE9/IE10 and IE mobile and adding a few to the deprecation list.

This release has updates across the platform, including the framework, so without further ado, let’s dive in!

Hot Module Replacement Support

HMR is a mechanism that allows modules to be replaced without a full browser refresh. It is not entirely a new thing for Angular developers to use it with previous versions as well. But with Angular 11, the efforts to configure the HMR are reduced drastically, and they offer a CLI command for that, which makes it quicker to see the modified code in your browser. The Angular HMR is currently supported, but it will be much easier than before with Angular 11.

Angular 11 is updated and allows you to enable HMR when starting an application using the ng serve command. To get started, run the following command:

ng serve --hmr

After starting the local server, the console will pop-up a message confirming that HMR is active but remember that it is enabled for the dev server only.

The modified components, styles, and templates are instantly updated into the running application without a full page refresh during the development process.

Experimental webpack 5 Support

The Angular development team can opt-in to webpack v5. Currently, you can experiment with module federation. In the future, it will have a clear path for the following:

● Smaller bundles thanks to cjs tree-shaking

● Faster development with persistent disk caching

Support is experimental, so you can’t opt-in for production uses.

To implement webpack 5 in your project, add the following in your package.json file:

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

You can currently use yarn to test this because it doesn’t require support for the resolutions property.

Linting

In all the previous versions of Angular, there is a default implementation for TSLint. But in the current version, it is deprecated by the project generators who suggested migration to RSLint. The Angular community collaborates closely for a smooth transition of Angular developers to the supported linting stack.

Syntax:

ng lint <project> [options]

ng l <project> [options]

Installation:

Local:

npm install tslint typescript --save-dev

or

yarn add tslint typescript --dev

Global:

npm install tslint typescript -g

or

yarn global add tslint typescript

Angular 11 deprecated Codelyzer and TSLin to represents the default implementation for linting Angular projects will be unavailable.

Roadmap

The Angular community updated the roadmap to keep you updated with the current priorities. Few announcements updates are in-progress projects from the roadmap, reflecting the approach to rollout greater efforts and provide immediate feedback to incorporate into the final release.

Automatic Inlining of Font

The Angular team addressed automatic font inlining linked and used in the application to run your application even faster by speeding up their first contentful paint. This update is enabled by default with version 11, so take advantage of this opportunity and update your app!

Add the webpack url-loader shown below:

npm install url-loader --save-dev

Now, implementing the actual inlining:

var path = require('path');
var config = {
  entry: path.resolve(__dirname, '../app/main.js')
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.woff$/,
        loader: 'url?limit=100000'
      },
      {
        test: /\.woff2$/,
        loader: 'url?limit=100000'
      },
      {
        test: /\.ttf$/,
        loader: 'url?limit=100000'
      },
      {
        test: /\.eot$/,
        loader: 'file'
      },
      {
        test: /\.svg$/,
        loader: 'url?limit=100000'
      }
    ]
  }
};

Other improvements in Angular 11 include:

● Performance improvements and new APIs to work with asynchronous actions

● Stricter types are added to catch misuses

● Updated Angular Language Service with more accurate experience

● Improvement in logging and reporting

● KeySpan is added to the variable node for the Angular compiler

● Changed the default value of relativeLinkResolution to prevent breakages during updating

● A Trusted Types policy is addressed in the development mode to support development features

● Updated navigating options are added to legacy functionality

● Use ngDevMode to tree-shake error messages for performance improvement

● TypeScript is upgraded to 4.0, which is advisable for your project rather than TypeScript 3.9 support

Final Thoughts

I think now you have a clear understanding of some significant updates in Angular 11. The beta releases are now available on GitHub. There are various significant updates in Angular 11, such as adding stricker types for number pipes, catching misuses like passing an array at the compile time, and much more.

In the meantime, if you’re willing to upgrade your project to Angular 11, run the following command, and you’re all set to start!

ng update @angular/cli @angular/core

If you are looking for a helping hand who can help you keep your Angular project up to date with the latest stable release, then get in touch to experinece one of a kind Angular upgrade services .

chandreshpatel