diff --git a/frontend/app/angular-modules.ts b/frontend/app/angular-modules.ts
index 9ead46cccf..2a697a8c60 100644
--- a/frontend/app/angular-modules.ts
+++ b/frontend/app/angular-modules.ts
@@ -50,7 +50,9 @@ angular
     'openproject.workPackages.config',
     'openproject.services'
   ]);
-angular.module('openproject.viewModels', ['openproject.services']);
+export const opViewModelsModule = angular.module('openproject.viewModels', [
+  'openproject.services'
+]);
 
 // timelines
 angular.module('openproject.timelines', [
diff --git a/frontend/app/components/wp-relations/relations-handler/relations-handler.service.ts b/frontend/app/components/wp-relations/relations-handler/relations-handler.service.ts
new file mode 100644
index 0000000000..46bbdf4d60
--- /dev/null
+++ b/frontend/app/components/wp-relations/relations-handler/relations-handler.service.ts
@@ -0,0 +1,114 @@
+//-- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+//++
+
+import {WorkPackageResource} from "../../api/api-v3/hal-resources/work-package-resource.service";
+import {opViewModelsModule} from "../../../angular-modules";
+
+var $timeout:ng.ITimeoutService;
+var WorkPackageService:any;
+var ApiNotificationsService:any;
+
+export class RelationsHandler {
+  public type:string = 'relation';
+  public isSingletonRelation:boolean = false;
+
+  constructor(public workPackage:WorkPackageResource, public relations, public relationsId) {
+  }
+
+  public isEmpty() {
+    return !this.relations || this.relations.length === 0;
+  }
+
+  public getCount() {
+    return this.relations ? this.relations.length : 0;
+  }
+
+  public canAddRelation() {
+    return !!this.workPackage.$links.addRelation;
+  }
+
+  public canDeleteRelation(relation) {
+    return !!relation.$links.remove;
+  }
+
+  public addRelation(scope) {
+    WorkPackageService.addWorkPackageRelation(this.workPackage,
+      scope.relationToAddId,
+      this.relationsId)
+      .then(function () {
+        scope.relationToAddId = '';
+        scope.updateFocus(-1);
+        scope.$emit('workPackageRefreshRequired');
+      }, function (error) {
+        ApiNotificationsService.addError(error);
+      });
+  }
+
+  public removeRelation(scope) {
+    var index = this.relations.indexOf(scope.relation);
+    var handler = this;
+
+    WorkPackageService.removeWorkPackageRelation(scope.relation).then(() => {
+      handler.relations.splice(index, 1);
+      scope.updateFocus(index);
+      scope.$emit('workPackageRefreshRequired');
+    }, function (error) {
+      ApiNotificationsService.addError(scope, error);
+    });
+  }
+
+  public applyCustomExtensions() {
+    if (this.canAddRelation) {
+      var workPackage = this.workPackage;
+      var relationsId = this.relationsId;
+      var handler = this;
+    }
+  }
+
+  public getRelatedWorkPackage(workPackage, relation) {
+    var self = workPackage.links.self.href;
+
+    if (relation.links.relatedTo.href === self) {
+      return relation.links.relatedFrom.fetch();
+    } else {
+      return relation.links.relatedTo.fetch();
+    }
+  }
+}
+
+function relationsHandlerService(_$timeout_,
+                                 _WorkPackageService_,
+                                 _ApiNotificationsService_) {
+  $timeout = _$timeout_;
+  WorkPackageService = _WorkPackageService_;
+  ApiNotificationsService = _ApiNotificationsService_;
+}
+
+relationsHandlerService.$inject = ['$timeout', 'WorkPackageService', 'ApiNotificationsService'];
+
+opViewModelsModule.factory('RelationsHandler', relationsHandlerService);
diff --git a/frontend/app/work_packages/view_models/common-relations-handler.js b/frontend/app/work_packages/view_models/common-relations-handler.js
deleted file mode 100644
index 9676f490ce..0000000000
--- a/frontend/app/work_packages/view_models/common-relations-handler.js
+++ /dev/null
@@ -1,108 +0,0 @@
-//-- copyright
-// OpenProject is a project management system.
-// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License version 3.
-//
-// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
-// Copyright (C) 2006-2013 Jean-Philippe Lang
-// Copyright (C) 2010-2013 the ChiliProject Team
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License
-// as published by the Free Software Foundation; either version 2
-// of the License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program; if not, write to the Free Software
-// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-//
-// See doc/COPYRIGHT.rdoc for more details.
-//++
-
-module.exports = function(
-    $timeout,
-    WorkPackageService,
-    ApiNotificationsService
-  ) {
-  function CommonRelationsHandler(workPackage,
-                                  relations,
-                                  relationsId) {
-    this.workPackage = workPackage;
-    this.relations = relations;
-    this.relationsId = relationsId;
-
-    this.type = 'relation';
-    this.isSingletonRelation = false;
-  }
-
-  CommonRelationsHandler.prototype = {
-    isEmpty: function() {
-      return !this.relations || this.relations.length === 0;
-    },
-
-    getCount: function() {
-      return (this.relations) ? this.relations.length : 0;
-    },
-
-    canAddRelation: function() {
-      return !!this.workPackage.links.addRelation;
-    },
-
-    canDeleteRelation: function(relation) {
-      return !!relation.links.remove;
-    },
-
-    addRelation: function(scope) {
-      WorkPackageService.addWorkPackageRelation(this.workPackage,
-                                                scope.relationToAddId,
-                                                this.relationsId)
-                        .then(function() {
-        scope.relationToAddId = '';
-        scope.updateFocus(-1);
-        scope.$emit('workPackageRefreshRequired');
-      }, function(error) {
-        ApiNotificationsService.addError(error);
-      });
-    },
-
-    removeRelation: function(scope) {
-      var index = this.relations.indexOf(scope.relation);
-      var handler = this;
-
-      WorkPackageService.removeWorkPackageRelation(scope.relation).then(function(response){
-          handler.relations.splice(index, 1);
-          scope.updateFocus(index);
-          scope.$emit('workPackageRefreshRequired');
-        }, function(error) {
-          ApiNotificationsService.addError(scope, error);
-        });
-    },
-
-    applyCustomExtensions: function() {
-      if (this.canAddRelation) {
-        var workPackage = this.workPackage;
-        var relationsId = this.relationsId;
-        var handler = this;
-      }
-    },
-
-    getRelatedWorkPackage: function(workPackage, relation) {
-      var self = workPackage.links.self.href;
-
-      if (relation.links.relatedTo.href === self) {
-        return relation.links.relatedFrom.fetch();
-      } else {
-        return relation.links.relatedTo.fetch();
-      }
-    }
-  };
-
-  return CommonRelationsHandler;
-};
diff --git a/frontend/app/work_packages/view_models/index.js b/frontend/app/work_packages/view_models/index.js
index 8e1fe8c9c6..5e36f63eb8 100644
--- a/frontend/app/work_packages/view_models/index.js
+++ b/frontend/app/work_packages/view_models/index.js
@@ -27,12 +27,6 @@
 //++
 
 angular.module('openproject.viewModels')
-  .factory('CommonRelationsHandler', [
-    '$timeout',
-    'WorkPackageService',
-    'ApiNotificationsService',
-    require('./common-relations-handler')
-  ])
   .factory('ChildrenRelationsHandler', [
     'CommonRelationsHandler',
     'WorkPackageService',