AngularJS to TypeScript Converter

Service factory to typed class

angular
  .module('app')
  .service('UserService', function ($http) {
    this.find = function (id) {
      return $http.get('/users/' + id);
    };
    this.list = function () {
      return $http.get('/users');
    };
  });

import * as angular from 'angular';

export class UserService {
  static $inject = ['$http'];

  constructor(private $http: angular.IHttpService) {}

  find(id: number) {
    return this.$http.get(`/users/${id}`);
  }
  list() {
    return this.$http.get('/users');
  }
}

angular.module('app').service('UserService', UserService);

Controller to component class

import * as angular from 'angular';
import { UserService } from './user.service';

export class UserListController {
  static $inject = ['UserService'];

  users: { id: number; name: string }[] = [];

  constructor(private userService: UserService) {}

  $onInit(): void {
    this.userService.list().then(res => { this.users = res.data; });
  }
}

angular.module('app').component('userList', {
  controller: UserListController,
  templateUrl: 'user-list.html',
});

@types packages you'll need

npm install --save-dev typescript @types/angular @types/angular-route @types/angular-resource

For a real AngularJS app, also grab matching @types/* packages for any third-party modules — @types/lodash, @types/jquery, and so on.

Path to modern Angular

Once your AngularJS code is TypeScript, you have two options:

1. Stay on AngularJS with full type safety. This is fine for apps in maintenance mode.
2. Run a hybrid upgrade with ngUpgrade: boot modern Angular alongside AngularJS and migrate components one at a time. The TypeScript port is the prerequisite — modern Angular only accepts TS.

tsconfig for AngularJS

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "CommonJS",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "strict": false,
    "experimentalDecorators": true,
    "lib": ["ES2017", "DOM"],
    "types": ["angular"]
  },
  "include": ["src/**/*"]
}

Start with strict: false and tighten flags incrementally once the build is green.

Related framework migrations