Migration Paths Overview
There are several ways to migrate from AngularJS to Angular, whether it is through ngUpgrade, angular elements, code conversion, partial or full rewriting, or hybrid routing. You can learn more about these various migration paths with this concise overview of all the potential migration paths.
Most paths take an incremental approach to migrating, where you upgrade one section of your application at a time and maintain a hybrid application that contains AngularJS and Angular. This approach eventually leads to an complete Angular application, where you have replaced all your old AngularJS features and built new features in Angular. The other approach is to do a direct rewrite of your application to Angular which allows you to have a fresh start, refactor, and try new techniques. To understand which approach is right for you, read the below descriptions of each migration path and visit their in-depth pages found in the sidebar.
Additionally, try using ngMigration Assistant to help determine which migration path is right for you. This tool scans your AngularJS application, provides a stats report on your app, and recommends a migration approach.
Incremental migration allows AngularJS and Angular code to interoperate seamlessly. This means you don't have to do the upgrade work all at once, since there's a natural coexistence between the two frameworks during the transition period. This makes it possible to upgrade even large and complex applications without disrupting other business, because the work can be done collaboratively and spread over a period of time.
The incremental approach could be right for you if you find that you need to continue releasing new features while slowly migrating from AngularJS to Angular. Developers who are eager to begin using Angular, but still have to maintain older AngularJS applications find that the incremental approach is more feasible. For large applications that would take years to rewrite, they depend on incremental migration techniques.
While you can choose which migration path is best for your application and team, know that some paths are reliant on the use of other paths. For example, using a hybrid routing migration path is implemented in conjunction with ngUpgrade. Likewise, you can use code conversion tools to help prepare and execute ngUpgrade.
The ngUpgrade library in Angular is a very useful tool for upgrading anything but the smallest of applications. With it you can build a hybrid application where you can bootstrap your AngularJS application from an Angular application. This allows you to mix and match AngularJS and Angular components in the same application and have them interoperate seamlessly.
Some applications will be easier to upgrade than others, and there are many ways to make it easier for yourself. It is necessary to prepare and align your AngularJS application with Angular even before beginning the upgrade process. These preparation steps are all about making the code more decoupled, more maintainable, and better aligned with modern development tools.
Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way. Transforming a component to a custom element provides an easy path to creating dynamic HTML content in your Angular app. You can use these to either create new features or replace old AngularJS components with Angular components.
With Angular elements, you can begin building your Angular app alongside downgrading Angular components into your existing AngularJS application. This incremental migration path offers easy transitioning between components through generic HTML elements.
You will need to use ngUpgrade alongside angular elements to upgrade services, providers, and dependency injections.
When developing Angular applications, you have the opportunity to build single-page applications (SPAs) using a router. SPAs load a single HTML page and dynamically updates the page as the user interacts with it. This in turn means that when you are migrating to Angular, you have to also migrate your router. There are a couple approaches to migrating your router, one is through hybrid routing and the other is a direct change.
Hybrid routing is when you have both an AngularJS router and Angular router running at the same time on your application. This allows for an incremental migration through a hybrid application that hosts both frameworks at the same time, eventually leading to the final switch to your Angular router. Hybrid routing can be used when upgrading from the built-in AngularJS to Angular router or through the AngularJS ui-router to Angular ui-router.
In contrast, a direct change approach is useful when you are rewriting your application from scratch. If you want to maintain a SPA in your Angular application, then you will switch to the built-in Angular router. This approach can be successful for smaller applications that are not as reliant on a hybrid state of their application.
There are some available tools, tutorials, and consultants your can use to help convert your AngularJS code to Angular. Automation can help speed up the upgrading process and identify bugs in your codebase. To learn more about available code conversion resources, visit the Awesome Tools sections of each in-depth migration page. Additionally, you can contact consultants to help upgrade your app for you.
Though incremental migration can be great for large applications, smaller apps can find rewriting from scratch to be a simpler approach. Rewriting offers some unique benefits in that you can choose to do things differently this time and implement better practices along the way. You can restructure your application, refactor until your heart's content, and throw away unnecessary code.
You have the safety of knowing that the Angular platform is here to help you in every stage of building your application and there is so much more content today on developing Angular applications than ever before. Therefore, rewriting from scratch may be the easiest option for your application and offers you the opportunity to leave AngularJS forever.
These are less researched or upcoming potential migration paths. We ask that you provide links to other possible solutions, though we cannot confirm that these solutions are well-used or still maintained. Proceed with interest and caution.
- Check out this github repo ng-metadata to use this opensource tool.
