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.