Angular Update Guide and check list

Angular Update Guide | 4.4 -> 9.0 for Advanced Apps

Before Updating

Stop using DefaultIterableDiffer, KeyValueDiffers#factories, or IterableDiffers#factories

Rename your template tags to ng-template

Replace any OpaqueToken with InjectionToken.

If you call DifferFactory.create(...) remove the ChangeDetectorRef argument.

Stop passing any arguments to the constructor for ErrorHandler

If you use ngProbeToken, make sure you import it from @angular/core instead of @angular/platform-browser

If you use TrackByFn, instead use TrackByFunction

If you import any animations services or tools from @angular/core, you should import them from @angular/animations

Replace ngOutletContext with ngTemplateOutletContext.

Replace CollectionChangeRecord with IterableChangeRecord

Anywhere you use Renderer, now use Renderer2

If you use preserveQueryParams, instead use queryParamsHandling

If you use the legacy HttpModule and the Http service, switch to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (you don't need to map to JSON anymore) and now supports typed return values and interceptors. Read more on angular.io.

If you use DOCUMENT from @angular/platform-browser, you should start to import this from @angular/common

During the Update

If you rely on the date, currency, decimal, or percent pipes, in 5 you will see minor changes to the format. For applications using locales other than en-us you will need to import it and optionally locale_extended_fr from @angular/common/i18n_data/locale_fr and registerLocaleData(local).

Do not rely on gendir, instead look at using skipTemplateCodeGen. Read More

Anywhere you use ReflectiveInjector, now use StaticInjector

Choose a value of off for preserveWhitespaces in your tsconfig.json under the angularCompilerOptions key to gain the benefits of this setting, which was set to off by default in v6.

Make sure you are using Node 8 or later

Update your Angular CLI locally, and migrate the configuration to the new angular.json format by running the following:

npm install @angular/cli@6
ng update @angular/cli@6

Update any scripts you may have in your package.json to use the latest Angular CLI commands. All CLI commands now use two dashes for flags (eg ng build --prod --source-map) to be POSIX compliant.

Update all of your Angular framework packages to v6, and the correct version of RxJS and TypeScript.

ng update @angular/core@6

After the update, TypeScript and RxJS will more accurately flow types across your application, which may expose existing errors in your application's typings

In Angular Forms, AbstractControl#statusChanges now emits an event of PENDING when you call AbstractControl#markAsPending. Ensure that if you are filtering or checking events from statusChanges that you account for the new event when calling markAsPending.

If you use totalTime from an AnimationEvent within a disabled Zone, it will no longer report a time of 0. To detect if an animation event is reporting a disabled animation then the event.disabled property can be used instead.

Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in v6 and removed in v7.

ngModelChange is now emitted after the value/validity is updated on its control instead of before to better match expectations. If you rely on the order of these events, you will need to begin tracking the old value in your component.

If you have TypeScript configured to be strict (if you have set strict to true in your tsconfig.json file), update your tsconfig.json to disable strictPropertyInitialization or move property initialization from ngOnInit to your constructor. You can learn more about this flag on the TypeScript 2.7 release notes.

Remove deprecated RxJS 5 features using rxjs-tslint auto update rules

For most applications this will mean running the following two commands:

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

Once you and all of your dependencies have updated to RxJS 6, remove rxjs-compat.

If you use the Angular Service worker, migrate any versionedFiles to the files array. The behavior is the same.

Angular now uses TypeScript 3.1, read more about any potential breaking changes: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-1.html

Angular has now added support for Node 10: https://nodejs.org/en/blog/release/v10.0.0/

Update to v7 of the core framework and CLI by running ng update @angular/cli@7 @angular/core@7 in your terminal.

Update to version 8 of the core framework and CLI by running ng update @angular/cli@8 @angular/core@8 in your terminal and review and commit the changes.

Replace /deep/ with ::ng-deep in your styles, read more about angular component styles and ::ng-deep. /deep/ and ::ng-deep both are deprecated but using ::ng-deep is preferred until the shadow-piercing descendant combinator is removed from browsers and tools completely.

Angular now uses TypeScript 3.4, read more about errors that might arise from improved type checking.

Make sure you are using Node 10 or later.

The CLI's build command now automatically creates a modern ES2015 build with minimal polyfills and a compatible ES5 build for older browsers, and loads the appropriate file based on the browser. You may opt-out of this change by setting your target back to es5 in your tsconfig.json. Learn more on angular.io.

When using new versions of the CLI, you will be asked if you want to opt-in to share your CLI usage data. You can also add your own Google Analytics account. This lets us make better decisions about which CLI features to prioritize, and measure the impact of our improvements. Learn more on angular.io.

If you use ViewChild or ContentChild, we're updating the way we resolve these queries to give developers more control. You must now specify that change detection should run before results are set. Example: @ContentChild('foo', {static: false}) foo !: ElementRef;. ng update will update your queries automatically, but it will err on the side of making your queries static for compatibility. Learn more on angular.io.

We are deprecating support for @angular/platform-webworker, as it has been incompatible with the CLI. Running Angular's rendering architecture in a web worker did not meet developer needs. You can still use web workers with Angular. Learn more in our web worker guide. If you have use cases where you need this, let us know at devrel@angular.io!

We have switched from the native Sass compiler to the JavaScript compiler. To switch back to the native version, install it as a devDependency: npm install node-sass --save-dev.

If you are building your own Schematics, they have previously been potentially asynchronous. As of 8.0, all schematics will be asynchronous.

Make sure you are using Node 10.13 or later.

Run ng update @angular/core@8 @angular/cli@8 in your workspace directory to update to the latest 8.x version of @angular/core and @angular/cli and commit these changes.

You can optionally pass the --create-commits (or -C) flag to ng update commands to create a git commit per individual migration.

Run ng update @angular/core @angular/cli which should bring you to version 9 of Angular.

Your project has now been updated to TypeScript 3.7, read more about new compiler checks and errors that might require you to fix issues in your code in the TypeScript 3.6 or TypeScript 3.7 announcements.

If you use Angular Universal, run ng update @nguniversal/hapi-engine or ng update @nguniversal/express-engine depending on the engine you use. This step may require the --force flag if any of your third-party dependencies have not updated the Angular version of their peer dependencies.

If your project depends on other Angular libraries, we recommend that you consider updating to their latest version. In some cases this update might be required in order to resolve API incompatibilities. Consult ng update or npm outdated to learn about your outdated libraries.

During the update to version 9, your project was transformed as necessary via code migrations in order to remove any incompatible or deprecated API calls from your code base. You can now review these changes, and consult the Updating to version 9 guide to learn more about the changes.

Bound CSS styles and classes previously were applied with a "last change wins" strategy, but now follow a defined precedence. Learn more about Class and Style bindings.

If you are a library author and you had a method returning ModuleWithProviders (typically via a method named forRoot()), you will need to specify the generic type. Learn more angular.io

Support for web tracing framework in Angular was deprecated in version 8. You should stop using any of the wtf* APIs. To do performance tracing, we recommend using browser performance tools.

If you use ngForm element selector to create Angular Forms, you should instead use ng-form.

We have updated the tsconfig.app.json to limit the files compiled. If you rely on other files being included in the compilation, such as a typings.d.ts file, you need to manually add it to the compilation.

After the Update

For lazy loaded modules via the router, make sure you are using dynamic imports. Importing via string is removed in v9. ng update should take care of this automatically. Learn more on angular.io.

With Angular 9 Ivy is now the default rendering engine, for any compatibility problems that might arise, read the Ivy compatibility guide.

If you depend on many Angular libraries you may consider speeding up your build by invoking the ngcc (Angular Compatibility Compiler) in an npm postinstall script via small change to your package.json.

If you use Angular Universal with @nguniversal/express-engine or @nguniversal/hapi-engine, several backup files will be created. One of them for server.ts. If this file defers from the default one, you may need to copy some changes from the server.ts.bak to server.ts manually.

Angular 9 introduced a global $localize() function that needs to be loaded if you depend on Angular's internationalization (i18n). Run ng add @angular/localize to add the necessary packages and code modifications. Consult the $localize Global Import Migration guide to learn more about the changes.

If you have specified any entryComponents in your NgModules or had any uses of ANALYZE_FOR_ENTRY_COMPONENTS, you can remove them. They are no longer required with the Ivy compiler and runtime.

If you use TestBed.get, you should instead use TestBed.inject. This new method has the same behavior, but is type safe.

If you use Angular's i18n support, you will need to begin using @angular/localize. Learn more about the $localize Global Import Migration.