This post documents the steps I completed to upgrade my project from Angular 6 to Angular 8. As my project uses the SystemJS module loader, I use the Angular CLI is not of much to do this upgrade and I might was well just make the necessary changes manually instead. Also, doing it this way also allows me to obtain a deeper understanding of what is going on under the hood.
Obviously, the first step in upgrading to v8 is to bump up the dependency & devDependency
minimum version numbers in package.json. Angular 8 depends on typescript ^3.4.0 and
rxjs ^6.4 hence these need to be updated as well, along with the core Angular packages. I’m still
using the rxjs-compat to allow me to defer migration of my RxJS code from the old chaining style to the
new pipeable operators until another day (perhaps I’ll finially do it when this support gets removed in
rxjs ^7.0).
Compiling with the typescript command line compiler indicated that there were a couple of breaking changes
introduced by the upgrades to various packages. Firstly, the Subscribable interface definition
changed in rxjs 6.3.0
release, meaning my thin wrapper around BehaviourSubject which also implemented this interface
was now broken. The necessary change to rectify this is below:
I have to say that this is the first time I’ve come across something I don’t like about TypeScript – I’m definitely not a fan of the (compatible) method signature collapsing. I do appreciate both the reason TypeScript does things this way (ie. transpilation to JS where the type info is lost and therefore the overloads collapse) and the fact it reduces the number of methods needing implementation versus having individual overloads, however I feel from an understandability perspective I think finding a way to support overloads would be much easier!
The second breaking change discovered was to be expected as it was noted in the
Angular Upgrade Guide – the
ViewChild decorator has acquired a new mandatory opts object parameter with a mandatory
static boolean property. As my project is not overly complex I chose to go with the recommended
{ static: false } value and a quick test confirms this was fine. There is a excellent article from
the Angular dev team here documenting
why this change was necessary and when to use what values for this new opts parameter.
Observable.subscribe( ) overloads
At this point my solution is compiling successfully. However whilest making these changes I did notice that
that overloads of Observable.subscribe( ) which I had been using in a few locations had been marked
as @deprecated. Specifically it was overloads where I was previosuly passing multiple functions
to Observable.subscribe( ) (typically both next and error functions).
Fortunately the fix is quite trivial – the functions just need to be wrapped in a PartialObserver
compatible object as can be seen below:
HttpModule to HttpClientModule↗