Upgrading Angular 6 to 7
Angular 7 was officially released on October 18, 2018. It’s been half a year since then - if we don’t keep up, we’ll fall behind.
Since my personal blog platform is built on Angular 6, I took this opportunity to upgrade and learn about version 7.
Note that Angular’s current latest version is 8.0.0-rc5. Please check the official website for the latest version information.
What are the main changes in Angular 7?
- CLI Prompts
- Application Performance
- Material CDK
- Improved Select Accessibility
- Angular Elements
- Ecosystem Improvements [Angular Console, @angular/fire, NativeScript, StackBlitz]
- Dependency Updates [TypeScript 3.1, RxJS 6.3, Node 10]
For a quick overview, check out the official blog’s version announcement. For specific API usage, refer to the documentation.
Personal Opinion
I think these changes aren’t particularly significant. Angular’s current version management strategy is such that even-numbered versions are the major releases, while odd-numbered ones are transitional. The anticipated Ivy renderer still hasn’t been released yet - we’ll have to wait.
Enough talk, let’s look at the upgrade process.
Version Upgrade
Here’s the direct comparison of versions before and after my successful upgrade.
Note
- Upgrading core-js to version 3 will cause errors, so I’m keeping it at 2.x
After only changing the versions of these packages, both running and building worked without issues - it was quite smooth.
Size Changes
Bundle size in frontend development is always worth paying attention to, as smaller sizes mean faster loading speeds. Here are screenshots of the bundle sizes before and after the upgrade. Since the current project is small, the size changes aren’t very obvious, but you can still see that the main bundle got smaller by approximately 18%.
Before Upgrade - v6
After Upgrade - v7
Official Upgrade Guide
As I mentioned in previous blog posts, the official team maintains an upgrade guide. Of course, this is quite rough, and following it exactly can still lead to issues. I’m just providing it here for reference:
Final Thoughts
Overall, upgrading from Angular 6 to 7 was relatively smooth. The main benefits observed were a reduction in bundle size and some performance improvements. While the changes in version 7 weren’t groundbreaking, keeping up with the latest versions ensures access to bug fixes, security updates, and gradual performance improvements.
