Angular 9 Upgrade - Thoughts

#angular #webdev

I got to upgrade one of our Angular projects from v8.3.23 to latest v9. Just like my previous experience, I used Angular's update guide which will list out all details specific to the source version.

Note: Angular will not proceed to execute ng update if there are pending commits on your branch.

Before

Since the project uses lazy loaded modules, I had to update all module string import to dynamic import.
Upgraded angular cli/core from v8.3.23 to v8.3.26

During

When I encountered the error × Migration failed: Incompatible peer dependencies found., I just followed the suggestion stated on the error message and ran the ng-update with --force parameter. It should look like: ng update @angular/core @angular/cli --force

After

Removed deprecated entryComponents from modules.
Ran ng add @angular/localize since we used ngx-translate.
Removed static text on ngx-translate elements.

<!-- OLD -->
<span translate="Profile.Save">Save</span>

<!-- NEW-->
<span translate="Profile.Save"></span>

Removed { read: false } params for @ViewChild.
For dynamic components, I had to place <template> inside a div to prevent them in appending at bottom of parent div.

<!-- OLD -->
<div class="parent">
   <div>Sibling 1<div>
   <template #host></template>
   <div>Sibling 2<div>
<div>

<!-- NEW -->
<div class="parent">
   <div>Sibling 1<div>
   <div>
      <template #host></template>
   </div>
   <div>Sibling 2<div>
<div>

ngx-charts

Ran ng update @swimlane/ngx-charts. This will also update @angular/cdk
The upgrade will remove d3 folder from node-modules. All references to d3 will have an error.
Ran npm install d3 --save and npm install @types/d3 --save-dev to fix d3 references errors
Updated reference from @swimlane/ngx-charts/release to @swimlane/ngx-charts on imports.

Final Thoughts

Don't forget to ng build --prod to ensure safe build.
In summary, upgrading our project to version 9 is straightforward if you don't have conflicting packages. ng update had been helpful in updating deprecated items from older versions. My experience may not be the same with others that have larger projects or have too many package dependencies.

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →