DEV Community

Jennifer Fadriquela
Jennifer Fadriquela

Posted on • Updated on

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

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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
jengfad profile image
Jennifer Fadriquela • Edited

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