2/24/2021 Angular Update Guide

Angular Update Guide

Select the options matching your project:

Angular Versions

From: 6.1 To: 10.0

Warning: We do not recommend moving across multiple major versions.

App Complexity

Basic Medium Advanced

Show more speci c update information relevant to around 10% of Angular developers.

Other Dependencies

I use ngUpgrade to combine AngularJS & Angular

I use Angular Material

Show me how to update!

Angular Update Guide | 6.1 -> 10.0 for Medium Apps

Before Updating

If you use the legacy HttpModule and the Http service, switch to HttpClientModule and
the HttpClient service. HttpClient simpli es 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.

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

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

https://update.angular.io/?l=2&v=6.1-10.0 1/6
2/24/2021 Angular Update Guide

npx 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.

During the Update

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 Angular Material to v7 by running ng update @angular/material@7 in your terminal.

You should test your application for sizing and layout changes.

If you use screenshot tests, you'll need to regenerate your screenshot golden les as many
minor visual tweaks have landed.

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.

https://update.angular.io/?l=2&v=6.1-10.0 2/6
2/24/2021 Angular Update Guide

The CLI's build command now automatically creates a modern ES2015 build with minimal
poly lls and a compatible ES5 build for older browsers, and loads the appropriate le 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.

Update Angular Material to version 8 by running ng update @angular/material@8 in your

terminal.

Instead of importing from @angular/material , you should import deeply from the speci c
component. E.g. @angular/material/button . ng update will do this automatically for you.

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.

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 ) ag to ng update commands to

create a git commit per individual migration.

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

Angular.

Your project has now been updated to TypeScript 3.8, read more about new compiler checks
and errors that might require you to x issues in your code in the TypeScript 3.7 or TypeScript
https://update.angular.io/?l=2&v=6.1-10.0 3/6
2/24/2021 Angular Update Guide

3.8 announcements.

Run ng update @angular/material@9 .

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 de ned precedence. Learn more about Styling Precedence.

Remove any es5BrowserSupport ags in your angular.json and set your target to
es2015 in your tsconfig.json . Angular now uses your browserslist to determine if an ES5

build is needed. ng update will migrate you automatically.

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

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.

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 modi cations. Consult the $localize Global Import Migration guide to learn
more about the changes.

If you have speci ed 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.

https://update.angular.io/?l=2&v=6.1-10.0 4/6
2/24/2021 Angular Update Guide

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.

Run ng update @angular/core@10 @angular/cli@10 which should bring you to version 10 of

Angular.

Run ng update @angular/material@10 .

New projects use the lename .browserslistrc instead of browserslist . ng update will
migrate you automatically.

Angular now requires tslint v6, tslib v2, and TypeScript 3.9. ng update will migrate you
automatically.

In version 10, classes that use Angular features and do not have an Angular decorator are no
longer supported. Read more. ng update will migrate you automatically.

If you use Angular forms, inputs of type number no longer listen to change events (this events
are not necessarily red for each alteration the value), instead listen for an input events.

For Angular forms validation, the minLength and maxLength validators now verify that the
form control's value has a numeric length property, and only validate for length if that's the case.

The Angular Package Format has been updated to remove esm5 and fesm5 formats. These
are no longer distributed in our npm packages. If you don't use the CLI, you may need to
downlevel Angular code to ES5 yourself.

Warnings about unknown elements are now logged as errors. This won't break your app, but it
may trip up tools that expect nothing to be logged via console.error .

You may see ExpressionChangedAfterItHasBeenChecked errors that were not detected

before when using the async pipe. The error could previously have gone undetected because
two WrappedValues are considered "equal" in all cases for the purposes of the check, even if
their respective unwrapped values are not. In version 10, WrappedValue has been removed.

For more details about deprecations, automated migrations, and changes visit the guide
angular.io
https://update.angular.io/?l=2&v=6.1-10.0 5/6
2/24/2021 Angular Update Guide

After the Update

As of Angular 9, enforcement of @Injectable decorators for DI is stricter and incomplete

provider de nitions behave differently. Read more. ng update will migrate you automatically.

https://update.angular.io/?l=2&v=6.1-10.0 6/6