diff --git a/static/js/app.tsx b/static/js/app.tsx
index 4f5bc19fe..83b4fae76 100644
--- a/static/js/app.tsx
+++ b/static/js/app.tsx
@@ -1,19 +1,2 @@
-import * as React from "react";
-import * as angular from "angular";
-
-import repoHeader from "./directives/components/publicRepo/header";
-import repoSidebar from "./directives/components/publicRepo/sidebar";
-import repoMain from "./directives/components/publicRepo/main";
-
-angular.module('quayPages').directive('rpHeader', function(reactDirective) {
-  return reactDirective(repoHeader);
-});
-
-angular.module('quayPages').directive('rpSidebar', function(reactDirective) {
-  return reactDirective(repoSidebar);
-});
-
-angular.module('quayPages').directive('rpMain', function(reactDirective) {
-  return reactDirective(repoMain);
-});
-
+import publicRepo from "./directives/components/publicRepo/publicRepo";
+publicRepo();
diff --git a/static/js/directives/components/publicRepo/publicRepo.tsx b/static/js/directives/components/publicRepo/publicRepo.tsx
new file mode 100644
index 000000000..a6369c4b1
--- /dev/null
+++ b/static/js/directives/components/publicRepo/publicRepo.tsx
@@ -0,0 +1,21 @@
+import * as angular from "angular";
+
+import repoHeader from "./header";
+import repoSidebar from "./sidebar";
+import repoMain from "./main";
+
+var publicRepo =  function(){
+  angular.module('quayPages').directive('rpHeader', function(reactDirective) {
+  return reactDirective(repoHeader);
+  });
+
+  angular.module('quayPages').directive('rpSidebar', function(reactDirective) {
+  return reactDirective(repoSidebar);
+  });
+
+  angular.module('quayPages').directive('rpMain', function(reactDirective) {
+  return reactDirective(repoMain);
+  });
+}
+
+export default publicRepo;