Upgrading Angular 4 to 5

Angular 5 was officially released on 2017-11-01, and Angular 4 was released on 2017-03-23, with a 7-month interval. Since the upgrade from Angular 4 to 5 is smooth with performance improvements and added features while maintaining browser compatibility, it’s worth upgrading.

Before upgrading, it’s necessary to understand what changes are involved.

What are the main changes in Angular 5?

Original source: CHANGELOG

Here’s a brief overview:

1. Features
   • HTTP requests can now directly set header information, form fields have new options like updateOn blur, routing adds ActivationStart/End events, etc.
2. Performance
   • Compiler improvements make incremental builds faster
3. Breaking Changes
   • TypeScript requirement updated to 2.4.x
   • Compiler has additional dependencies
   • i18n uses new internationalization pipes, no longer needing separate intl imports
   • etc.

Starting the Upgrade

• Upgrade CLI to 1.5 or higher, latest version recommended npm install -g @angular/cli
• Upgrade project-related module packages

    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "rxjs": "^5.5.4",
    "@angular/compiler-cli": "^5.2.2",
    "@angular/language-service": "^4.4.6",
    "codelyzer": "~4.1.0",
    "typescript": "2.4.2"

Actual AOT Build Results

After upgrading, I tested AOT builds, and the bundle sizes are as follows:

Angular 4

Angular 5

Speaking purely of build bundle size, there’s almost no change, but the vendor file disappeared, with its content transferred to the main file.

Final Thoughts

Framework upgrades and version iterations are undoubtedly getting better, so we should approach framework upgrades with an open and progressive attitude, not being conservative or fearful. As long as it’s suitable and better, it’s worth upgrading.

For example, after my quick upgrade, I immediately noticed several benefits, and there are certainly more:

1. Regarding i18n changes, Angular removed intl and uses CLDR. The intl file (47KB) that was previously needed for IE11 and below and Safari 10 and below is no longer required
2. The vendor build file disappeared. Although the size is still counted in the main file, fewer files mean fewer browser requests, which is better to some extent
3. Incremental build speed: Due to compiler improvements and TypeScript upgrades, compilation and building are inherently beneficial. Although I didn’t record detailed metrics due to time constraints, based on official announcements, it’s definitely faster.