AngularJS to Angular

Slaven Kopic — Tue, 22 Dec 2020 14:53:38 +0000

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.

DEV Community: Slaven Kopic