Angular 2.0: migration path from Angular 1.x
I'm not looking for opinions - just a solid migration strategy.
We started to design a new project, which was built with Angular like each of our previous ones, the importance of this project is very high, and it will live and maintain for at least 3-4 years.
Angular 2.0 arrives at the end of 2015 and it looks like things are about to change, the $ scope is out, the directives are missing, and the whole DI concept is about to change.
- Is there a migration path / strategy that will be covered in the next few months?
- If we built a project using 1.x, what action do we need to take during development to ensure a clean migration?
- Can these 2 versions be considered as two different frameworks? (Yes means Angular 1.x will be maintained and developed by google)
source to share
In 2015, the ng-Conf Angular team discussed the initial concepts for this. It is important to note:
- You will be able to mix and match Angular 1 and Angular 2 modules so that you can gradually move your application to Angular 2.
- Angular 2 will be written using TypeScript / ES7 so that it can help you use these languages and translate them to ES5 for your current application. While you can use ES5 in Angular 2, there are things like class structures and annotations / decorators that can make Angular 2 easier to use.
- Migration instructions will be posted after Google migrates one of its internal applications. Others will likely add their contributions as Angular 2 becomes more stable.
For more information from ng-Conf, see the following videos:
source to share
The last blog post to date from the Angular developers will give you a step-by-step process. The key is to use the new ng-upgrade libraries. Here are the steps directly from the blog post (linked below):
- Include Angular 2 and ng-upgrade libraries with existing app
-
Select the component you want to transfer
- Change Angular 1 template template to match Angular 2 syntax
- Converting directive controller / binding function in Angular 2 syntax / semantics
- Use ng-upgrade to export the directive (now a component) as an Angular 1 component (this is required if you want to invoke a new Angular 2 component from the Angular 1 template).
-
Select the service you would like to transfer
- and. Most services should require minimal change.
- b. Set up a service in Angular 2
- from. (optional) re-export the service to Angular 1 with ng-upgrade if it is still used by other parts of your Angular 1 code.
- Repeat steps 2 and 3 in the order convenient for developing your application.
- After no more services / components need to be converted, remove the top level Angular 1 bootstrap and replace it with Angular 2 boot.
Angular 1 and Angular 2 Coexistence
Good luck!
source to share