tech(systemjs): finally starting to get systemjs and typescript and runtime loading to work together in a manner that I want it to.. took forever

public/app/app.ts

@@ -17,6 +17,9 @@ import kbn = require('app/core/utils/kbn');
 import angular = require('angular');
 import config = require('app/core/config');
 
+import mod from 'app/core/core_module';
+console.log(mod);
+
 class GrafanaApp {
   registerFunctions: any;
   ngModuleDependencies: any[];
@@ -66,7 +69,8 @@ class GrafanaApp {
       this.useModule(angular.module(moduleName, []));
     });
 
-    var preBootRequires = [System.import('app/features/all')];
+    //var preBootRequires = [System.import('app/features/all')];
+    var preBootRequires = [];
     var pluginModules = config.bootData.pluginModules || [];
 
     // add plugin modules
@@ -76,7 +80,7 @@ class GrafanaApp {
 
     Promise.all(preBootRequires).then(() => {
       // disable tool tip animation
-      $.fn.tooltip.defaults.animation = false;
+      //$.fn.tooltip.defaults.animation = false;
       // bootstrap the app
       angular.bootstrap(document, this.ngModuleDependencies).invoke(() => {
         _.each(this.preBootModules, module => {

public/app/core/core.ts

@@ -28,8 +28,9 @@ import * as routes from 'app/core/routes/all';
 // export * from './directives/give_focus'
 // export * from './filters/filters'
 
-import {Component} from 'angular2/core';
+import {Component} from 'vendor/jspm/angular2/core';
 console.log(Component);
+
 //  console.log(Component);
 // // console.log(Component);
 

public/app/headers/common.d.ts

@@ -1,5 +1,7 @@
 ///<reference path="lodash/lodash.d.ts" />
 ///<reference path="moment/moment.d.ts" />
+///<reference path="../../vendor/jspm/angular2/typings/tsd.d.ts" />
+///<reference path="../../vendor/jspm/angular2/manual_typings/globals.d.ts" />
 
 // dummy modules
 declare module 'app/core/config' {

public/app/jspm.conf.js

@@ -1,23 +1,21 @@
 System.config({
-  baseURL: "public",
+  defaultJSExtenions: true,
-  defaultJSExtensions: true,
-  transpiler: false,
   paths: {
-    moment:   'vendor/moment',
+    moment:   'public/vendor/moment.js',
-    "jquery": "vendor/jquery/dist/jquery.js",
+    "jquery": "public/vendor/jquery/dist/jquery.js",
-    'lodash-src': 'vendor/lodash',
+    'lodash-src': 'public/vendor/lodash.js',
-    "lodash": 'app/core/lodash_extended',
+    "lodash": 'public/app/core/lodash_extended.js',
-    "angular": "vendor/angular/angular.js",
+    "angular": "public/vendor/angular/angular.js",
-    "bootstrap": "vendor/bootstrap/bootstrap.js",
+    "bootstrap": "public/vendor/bootstrap/bootstrap.js",
-    'angular-route':          'vendor/angular-route/angular-route',
+    'angular-route':          'public/vendor/angular-route/angular-route.js',
-    'angular-sanitize':       'vendor/angular-sanitize/angular-sanitize',
+    'angular-sanitize':       'public/vendor/angular-sanitize/angular-sanitize.js',
-    "angular-ui":             "vendor/angular-ui/ui-bootstrap-tpls.js",
+    "angular-ui":             "public/vendor/angular-ui/ui-bootstrap-tpls.js",
-    "angular-strap":          "vendor/angular-other/angular-strap.js",
+    "angular-strap":          "public/vendor/angular-other/angular-strap.js",
-    "angular-dragdrop":       "vendor/angular-native-dragdrop/draganddrop.js",
+    "angular-dragdrop":       "public/vendor/angular-native-dragdrop/draganddrop.js",
-    "angular-bindonce":       "vendor/angular-bindonce/bindonce.js",
+    "angular-bindonce":       "public/vendor/angular-bindonce/bindonce.js",
-    "spectrum": "vendor/spectrum.js",
+    "spectrum": "public/vendor/spectrum.js",
-    "filesaver": "vendor/filesaver.js",
+    "filesaver": "public/vendor/filesaver.js",
-    "bootstrap-tagsinput": "vendor/tagsinput/bootstrap-tagsinput.js",
+    "bootstrap-tagsinput": "public/vendor/tagsinput/bootstrap-tagsinput.js",
     "jquery.flot": "vendor/flot/jquery.flot",
     "jquery.flot.pie": "vendor/flot/jquery.flot.pie",
     "jquery.flot.events": "vendor/flot/jquery.flot.events",
@@ -30,12 +28,15 @@ System.config({
   },
 
   packages: {
-    "js": {
+    app: {
-      "defaultExtension": "js"
+      defaultExtension: 'js',
-    }
+    },
   },
 
   map: {
+    'vendor/jspm/angular2': 'angular2',
+    app: 'public/app',
+    vendor: 'public/vendor',
   },
 
   meta: {

tasks/options/typescript.js

@@ -11,7 +11,6 @@ module.exports = function() {
         rootDir: 'public/',
         sourceRoot: 'public/',
         declaration: true,
-        moduleResolution: 2,
         emitDecoratorMetadata: true,
         experimentalDecorators: true,
         sourceMap: true,

tsconfig.json

@@ -1,16 +1,15 @@
 {
     "compilerOptions": {
-        "sourceMap": true,
+      "emitDecoratorMetadata": true,
-        "declaration": true,
+      "experimentalDecorators": true,
-        "outDir": "public_gen",
+      "sourceMap": true,
-        "noImplicitAny": false,
+      "declaration": true,
-        "target": "es5",
+      "outDir": "public_gen",
-        "rootDir": "public/",
+      "noImplicitAny": false,
-        "module": "system",
+      "target": "es5",
-        "moduleResolution": 2,
+      "rootDir": "public",
-        "noEmitOnError": true
+      "module": "system",
-    },
+      "noEmitOnError": true,
-    "files": [
+      "moduleResolution": "classic"
-        "public/app/core/core_module.ts"
+    }
-    ]
+}
-}