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 theng-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 usedngx-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 fromnode-modules
. All references tod3
will have an error.Ran
npm install d3 --save
andnpm install @types/d3 --save-dev
to fixd3
references errorsUpdated 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)
Maybe your project is larger. Ours is relatively small and has fewer dependencies.