loading...

Angular 9 Upgrade - Thoughts

jengfad profile image Jennifer Fadriquela Updated on ・2 min read

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

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.

Posted on by:

Discussion

pic
Editor guide
 

Interesting. My experience is entirely contrary to yours. I followed the update guidelines, yet the update command ended up messing up the node modules folder giving me various cryptic error messages. when doing ng serve.

In the end, I had to completely clean out the local packages cache and redo the entire update process. 😬😬 Wasted an entire hour on the upgrade.

 

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