AngularJS to Angular

Introduction

Recently I tried to upgrade AngularJS application to Angular (v11.0.5). In this post I will describe important steps how AngularJS can be upgraded to Angular.

Convert .js files to .ts

If you are using AngularJS with JavaScript, first you need to convert all the files to Typescript by changing the extension to .ts. Since TypeScript is just an extension of JavaScript, conversion should be done without any issues.

Add TypeScript

• Install TypeScript by running npm i typescript.
• Create tsconfig.json file with following content.

Add Webpack and Webpack Dev Server

• Install Webpack by running npm i webpack webpack-dev-server -d.
• Create webpack.config.js file with following content.
• Webpack plugins used in webpack.config.js also need to be installed.

Load TypeScript

• create main.ts with following content.
• main.ts is used as entry file for Webpack.

Add scripts

• Add scripts to run and build the app in the package.json file.
• Scripts can be found in the package.json.

Add Angular dependencies

• Install Angular dependencies by running npm i @angular/animations @angular/common @angular/compiler @angular/compiler-cli @angular/core @angular/forms @angular/platform-browser @angular/platform-browser-dynamic @angular/router @angular/upgrade zone.js rxjs.

Bootstrap hybrid app

• Use UpgradeModule to bootstrap hybrid app.
• Example of how to bootstrap hybrid app can be found here.

Migrate services

• Migrate services one by one to Angular.
• In transition period use downgradeInjectable() to run Angular services inside AngularJS.
• Example of how to migrate a service and use it in AngularJS can be found here.

Migrate components and modules

• Migrate all components and modules to Angular.
• In transition period use downgradeComponent() and downgradeModule() to run Angular components and modules in AngularJS.

Remove AngularJS

• Remove downgrades (downgradeInjectable(), downgradeComponent(), downgradeModule())
• Remove all AngularJS dependencies.

Running

• Run app by executing the following command npm start.

Example project

• Example project can be found here.

Disclaimer

Only the steps I personally found important to emphasize are written. Example project is not fully complete.

Comments

[David Green]

I am trying to get some guidance on the upgrade path from Angular JS to Angular. Our app currently runs at Angular JS V1.2 and we are looking to migrate to Angular V14 or V15. I am leaning towards a rebuild at the moment but trying to understand the ngUpgrade path. Can I use ngUpgrade to move direct to V14 or 15, do I need to upgrade to JS V1.6 first then ngUpgrade to V14 or 15 or what else do we need to do?

[Vuong Dang]

Thanks for the example project, really helpful!