diff --git a/public/app/features/dashboard/all.ts b/public/app/features/dashboard/all.ts
index f21338f5d6a..50c83803471 100644
--- a/public/app/features/dashboard/all.ts
+++ b/public/app/features/dashboard/all.ts
@@ -19,7 +19,7 @@ import './export/export_modal';
 import './export_data/export_data_modal';
 import './ad_hoc_filters';
 import './repeat_option/repeat_option';
-import './dashgrid/DashboardGrid';
+import './dashgrid/DashboardGridDirective';
 import './dashgrid/PanelLoader';
 import './dashgrid/RowOptions';
 import './acl/acl';
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 7b0f040e199..c640e06cc9b 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import coreModule from 'app/core/core_module';
 import ReactGridLayout from 'react-grid-layout';
 import {GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT} from 'app/core/constants';
 import {DashboardPanel} from './DashboardPanel';
@@ -174,6 +173,3 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
   }
 }
 
-coreModule.directive('dashboardGrid', function(reactDirective) {
-  return reactDirective(DashboardGrid, [['getPanelContainer', {watchDepth: 'reference', wrapApply: false}]]);
-});
diff --git a/public/app/features/dashboard/dashgrid/DashboardGridDirective.ts b/public/app/features/dashboard/dashgrid/DashboardGridDirective.ts
new file mode 100644
index 00000000000..84a0e0653e8
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/DashboardGridDirective.ts
@@ -0,0 +1,4 @@
+import { react2AngularDirective } from 'app/core/utils/react2angular';
+import { DashboardGrid } from './DashboardGrid';
+
+react2AngularDirective('dashboardGrid', DashboardGrid, [['getPanelContainer', {watchDepth: 'reference', wrapApply: false}]]);