publication

How to update Angular 11

Miquel Canal

Sunday 13, December 2020
  • Angular
  • JavaScript
  • Frontend

Update from Angular 7 to 11

Angular 11 was released on November 2020. As new versions of Angular are released, it is important to keep your projects up to date with latest release. Here are the steps to update to Angular 11:

  1. Make sure to use the new HttpClientModule and HttpClient modules. The HttpModule and the Http services have been deprecated.
  2. Update all dependencies of RxJS to version 6. Then remove rxjs-compat package.
  3. Finally, if you use an Angular Service worker migrate any versionedFiles reference to the files array.

After doing the changes above your project is ready to update to Angular 11. It is important to notice that upgrading multiple Angular versions requires a chain of updates between major versions. Here is the list of changes that needs to be done to update from Angular 7 to 11:

  1. Use Angular CLI to update your core dependencies to version 8 by running ng update @angular/cli@8 @angular/core@8
  2. Make sure you are using Node 10.13 or higher version.
  3. The new Angular CLI is going to compile JavaScript bundles to ES2015. If your project requires es5 compatibility, change the target value of the tsconfig.json.
  4. ViewChild and ContentChild are now tied to a static configuration. This allows control over change detection should run before results are set. The ng update commands updates them automatically. You should ensure the update script matches your expectations on each case.
  5. Lazy loading modules via string has been deprecated in Angular 9. Ensure your modules are loaded using dynamic imports. The ng update commands updates them automatically.
  6. Update your project to Angular 9 by running ng update @angular/core@9 @angular/cli@9. The script is going to update files automatically.
  7. Ensure all @angular dependencies described on your package.json are pointing to version 9. If any is missing you should perform the update manually.
  8. Angular v9 compiler Ivy has bundleDependencies enabled by default. If you want to build without bundle dependencies, you need to run the standalone Angular compatibility compiler (ngcc).
  9. If the Angular project uses (i18n), you are required to expose a new global function $localize(). You can run ng add @angular/localize to include required packages.
  10. Finally, run ng update @angular/core @angular/cli command to update to Angular 11. This will migrate your project to latest Angular release.
  11. After the update to Angular 11 is done your project will be using Typescript 4. Make sure to read the new compiler specs and error checks.

It is important to note that since v10 was announced, the Angular framework does not support IE9, IE10, and IE mobile. The step by step listed above are references on how to migrate to Angular 11. For full details on major changes between each version, refer to the official Angular documentation update.

What’s new on Angular 11?

With the new release of Angular 11 there are key features that have been improved within the framework. Here is a list of changes introduced by Angular 11.

References

Angular: Data Binding

Angular: Data Binding

Data communication between the logic component and DOM elements of an Angular application.

Create Angular Component after Application Initializes

Create Angular Component after Application Initializes

Basic learning of how to use build-in tools provided by Angular in order to create components after an application has been loaded.

Angular: ViewChild and Local References

Angular: ViewChild and Local References

Access DOM elements directly using viewChild and Template Reference Variables.

This site uses cookies to ensure a great experience. By continue navigating through the site you accept the storage of these cookies.