How to Migrate from angular 6 to 7
The Angular 7 was released. It is time for all of our ngx-* projects to upgrade to the latest version and live on the edge.
This release focused on improving the entire platform. Drag and Drop and Angular Elements were one of the key features in this release.
Note: There was a breaking change in 6.1 (wait, are breaking changes should be part of major releases, you know about it. We are talking about Angular 😉) which affects only those who use bazel for the building. (check out here)
The all new and exciting IVY is still in active development and not in this release. 😢
The full list of changelog can be found here, here and here.
With the introduction of Schematics, Angular CLI adds in new prompts feature. This will definitely increase developer productivity and customising the code transformations that will be built on top of Angular CLI.
The ng new command, will prompt you to ask whether you need routing and stylesheet format. Upon selecting the default options to both questions. That is no routing and CSS stylesheet format.
The ng serve command, In Angular7, it takes 5.4s (✅) to build and 3.5MB (✅) bundle size for a basic app generated by angular-cli. Slightly lesser than Angular 6.
On the other hand, aot builds without minification and suppling prod flags takes around 5.6s (✅) and 3.4MB (🔻🔻) bundle size.
With — prod flag, it takes around 23s (🔻) to build and the bundle size is around 107KB(✅✅)
There is a significant increase in the build time, but the bundle size is decreased drastically in the prod build. It is really awesome.
With Schematics, it will be easier for Angular team to introduce breaking changes and handle them gracefully with the developers. You can use
ng update @angular/cli @angular/coreThe major change, with this upgrade is updating the dependent libraries like rxjs and TypeScript.
Angular 7 supports Node 10 🎉. It also supports TypeScript 3.1 and Rxjs 6 ( check the migration guide). There will be a lot of rxjs library imports upgrade.
If you are tired of regular benchmarks with angular cli generated app and interested in more of a real-world complex application example, here we go.
For this example, as we did before, we will take a sample JHipster application, share our story of what we did to migrate to angular 7.
If you haven’t heard about JHipster, you should definitely check it here. If you are (dream of) doing full stack development and interested to learn the newest technology and also how to do things faster and more awesome you should check out here.
You can find the bundle differences between angular 5, angular 6 and angular 7 below,
This version also supports prompts in CLI. So you can create your own schematics for migration. This will tremendously reduce the amount of manual changes that you have to do.
Now you need RxJS 6.3 and TypeScript 3.1 for Angular 7.
Other exciting things to notice are
- Angular Elements now supports Shadow DOM v1 and slots — Check out here
Why would you update to Angular 6?
- Bundle size is reduced
- One step closer to
ivy
Why you should take some time and think?
- With new TypeScript and RxJS, it is a good time to migrate.
Happy Hacking 😎
