Angular 9 Upgrade - Thoughts

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.

Comments

[Jennifer Fadriquela]

Maybe your project is larger. Ours is relatively small and has fewer dependencies.