diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts
index ae030bcc3e..9780aff729 100644
--- a/src/app/doubtfire-angular.module.ts
+++ b/src/app/doubtfire-angular.module.ts
@@ -250,6 +250,7 @@ import {TasksViewerComponent} from './units/states/tasks/tasks-viewer/tasks-view
 import {UnitCodeComponent} from './common/unit-code/unit-code.component';
 import {GradeService} from './common/services/grade.service';
 import {ScormPlayerComponent} from './common/scorm-player/scorm-player.component';
+import {TimeoutComponent} from './errors/states/timeout/timeout.component';
 import {ScormAdapterService} from './api/services/scorm-adapter.service';
 import {ScormCommentComponent} from './tasks/task-comments-viewer/scorm-comment/scorm-comment.component';
 import {TaskScormCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component';
@@ -475,6 +476,7 @@ const GANTT_CHART_CONFIG = {
     CommentsModalComponent,
     ScormPlayerComponent,
     ScormCommentComponent,
+    TimeoutComponent,
     TaskScormCardComponent,
     ScormExtensionCommentComponent,
     ScormExtensionModalComponent,
diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts
index ca57426fd2..2ae5d6013d 100644
--- a/src/app/doubtfire-angularjs.module.ts
+++ b/src/app/doubtfire-angularjs.module.ts
@@ -127,7 +127,6 @@ import 'build/src/app/sessions/auth/http-auth-injector.js';
 import 'build/src/app/sessions/sessions.js';
 import 'build/src/app/errors/errors.js';
 import 'build/src/app/errors/states/unauthorised/unauthorised.js';
-import 'build/src/app/errors/states/timeout/timeout.js';
 import 'build/src/app/errors/states/states.js';
 import 'build/src/common/utilService/utilService.js';
 import 'build/src/common/i18n/localize.js';
diff --git a/src/app/doubtfire.states.ts b/src/app/doubtfire.states.ts
index f1710f6b54..e3cb74a425 100644
--- a/src/app/doubtfire.states.ts
+++ b/src/app/doubtfire.states.ts
@@ -15,6 +15,7 @@ import {ProjectPlanComponent} from './projects/states/plan/project-plan.componen
 import {JplagReportViewerComponent} from './projects/states/jplag/jplag-report-viewer.component';
 import {LtiDashboardComponent} from './home/states/lti-dashboard/lti-dashboard.component';
 import {LtiUnitLinkComponent} from './home/states/lti-unit-link/lti-unit-link.component';
+import {TimeoutComponent} from './errors/states/timeout/timeout.component';
 /*
  * Use this file to store any states that are sourced by angular components.
  */
@@ -574,6 +575,19 @@ const LtiUnitLinkState: NgHybridStateDeclaration = {
   },
 };
 
+const TimeoutState: NgHybridStateDeclaration = {
+  name: 'timeout',
+  url: '/timeout?dest&params',
+  views: {
+    main: {
+      component: TimeoutComponent,
+    },
+  },
+  data: {
+    pageTitle: '_Timeout_',
+  },
+};
+
 /**
  * Export the list of states we have created in angular
  */
@@ -592,6 +606,7 @@ export const doubtfireStates = [
   ScormPlayerNormalState,
   ScormPlayerReviewState,
   ScormPlayerStudentReviewState,
+  TimeoutState,
   SuccessCloseState,
   projectPlanState,
   TutorDiscussionState,
diff --git a/src/app/errors/states/states.coffee b/src/app/errors/states/states.coffee
index 4d76d4af26..45c8af30d6 100644
--- a/src/app/errors/states/states.coffee
+++ b/src/app/errors/states/states.coffee
@@ -1,4 +1,3 @@
 angular.module("doubtfire.errors.states", [
-  "doubtfire.errors.states.timeout"
   "doubtfire.errors.states.unauthorised"
 ])
diff --git a/src/app/errors/states/timeout/timeout.coffee b/src/app/errors/states/timeout/timeout.coffee
deleted file mode 100644
index d39ee75792..0000000000
--- a/src/app/errors/states/timeout/timeout.coffee
+++ /dev/null
@@ -1,20 +0,0 @@
-angular.module("doubtfire.errors.states.timeout", [])
-
-#
-# Define the timeout state
-#
-.config(($stateProvider) ->
-  stateData =
-    url: "/timeout"
-    views:
-      main:
-        controller: "TimeoutCtrl"
-        templateUrl: "errors/states/timeout/timeout.tpl.html"
-    data:
-      pageTitle: "_Timeout_"
-  $stateProvider.state "timeout", stateData, 'TimeoutCtrl'
-)
-# this can be removed... timeout should just sign out and redirect to login
-.controller("TimeoutCtrl", (authenticationService) ->
-  setTimeout((-> authenticationService.signOut(false)), 2000)
-)
diff --git a/src/app/errors/states/timeout/timeout.tpl.html b/src/app/errors/states/timeout/timeout.component.html
similarity index 100%
rename from src/app/errors/states/timeout/timeout.tpl.html
rename to src/app/errors/states/timeout/timeout.component.html
diff --git a/src/app/errors/states/timeout/timeout.component.ts b/src/app/errors/states/timeout/timeout.component.ts
new file mode 100644
index 0000000000..d976afabdb
--- /dev/null
+++ b/src/app/errors/states/timeout/timeout.component.ts
@@ -0,0 +1,14 @@
+import {Component, OnInit} from '@angular/core';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+
+@Component({
+  selector: 'timeout',
+  templateUrl: './timeout.component.html',
+})
+export class TimeoutComponent implements OnInit {
+  constructor(private authenticationService: AuthenticationService) {}
+
+  ngOnInit(): void {
+    setTimeout(() => this.authenticationService.signOut(false), 2000);
+  }
+}