Connecting Angular 1 and Angular 2 with UpgradeModule

Angular 2 comes with the ability to connect it to an existing Angular 1 application. This is obviously advantageous since this will allow you to utilize existing components and services in Angular 1 in tandem with Angular 2's components and services. UpgradeModule is the tool that is supported by Angular teams to accomplish such a feat.


The code, links, and a live example in relation to this recipe are available at

Getting ready

Suppose you had a very simple Angular 1 application as follows:

[index.html] <!DOCTYPE html> <html> <head> <!-- Angular 1 scripts --> <script src="angular.js"></script> </head> <body> <div ng-app="hybridApp" ng-init="val='Angular ...

Get Angular 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.