How to update Angular 11

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.

• Component Test Harnesses. It provides infrastructure that helps testing Angular components. In Angular v11, all components can use the harness API to insulate itself against its internal updates.
• Improvements on the CLI. One of the features that is most loved by developers is getting accurate and stylised feedback while working with the terminal. Kudos to the Angular team for its work on the terminal reporting and logging.
• HRM Support. HMR is a way of exchanging modules in a running application. An application can add or remove modules without a full page reload. In Angular 11 the CLI allows to set HMR when creating a new app from scratch.
• Performance increase while building. Another plus to Angular 11 CLI which is reported to increase build efficiency by x2-4.
• Inline Fonts. Angular 11 CLI allows for download and inline fonts used in the project at compilation time.
• TSLint has been deprecated by its original author. Angular 11 is migrating to ESLint and deprecating Codelyzer as well.
• IE deprecation. It is time to say goodbye to the hated/loved browser.

References

• https://update.angular.io
• https://angular.io
• https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7
• https://angular.io/guide/roadmap