5 Simple Steps to Migrate Angular1 Apps to the Latest Angular

Over the past few years, AngularJS has been a frontrunner among JavaScript frameworks. So, it is obvious that thousands of apps and production sites are built with Google’s superheroic framework and still much more are in production and maintenance. Although it is not feasible to rewrite an Angular app all at once, especially if it is large, but migrating the same could be a more realistic option. Angular experts recommend the following steps to gradually migrate Angular 1 apps to Angular 2:

1. Change the bootstrap logic to use UpgradeModule

Firstly, bootstrap Angular 2 and once done, bootstrap Angular 1 using the NgUpgrade.bootstrap method. The Angular 1 router uses the ng-view generated by RootCmp in order to instantiate its template. Now, the app combines aspects of Angular 1 and Angular 2 even though the Angular 1 app is just wrapped around by Angular 2 code and the app logic is still written in Angular 1.

2. Update all the modules to export a ng module

In this step, you will eventually move all the components, services and routes from MenuModule to MenuNgModule. This will ensure the migration of all the modules to Angular 2 by creating new ng modules.

Recommended read — Top 4 .NET Framework Features for App Modernization

3. Start migrating individual services and components

This is one of the most time-taking steps in the whole migration process which includes porting individual components to Angular 2 one after another. However, migrating services will be pretty straightforward. If the modules are tightly coupled then consider migrating them all at once, otherwise migrate one and then move to step 4.

4. Divide the routes between routers of Angular 1 and Angular 2

In small applications, you can migrate all the components in one go and then rewrite routes for them. However, when the application is large migrate one module and then wire it up in ng2_app.ts (consult experts at an Angular Development Agency to know about this step in detail). At the end of this step, you would find that the whole module has been successfully migrated to Angular 2.

5. Once all the modules are migrated, remove Angular 1

In this final step, once again, ensure that all the modules have been migrated and once done update the ng2_app.ts and main.ts files to remove all the usages of UpgradeModule.

It would be better to consult an Angular specialist to carry out the process more professionally and successfully.


Originally published at www.techsling.com on February 16, 2017.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.