@types 404 not found angular2

Question

UPDATE

I've added the code here https://www.dropbox.com/s/g3k4phhqffleeh0/jsapi4-angular2.zip?dl=0 , someone please help :(

========

I have an angular 2 project that I forked over and started working on.

Everything was great and dandy until I actually needed to install some types and use them. Intellisense picks up on the typings and can find them. Building isn't an issue either. However SystemJS can't seem to find the typings. I've been battling this for about 10 hours now and can't seem to find a solution :(. Please help.

Screenshot of chrome console

systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
System.config({
transpiler: 'typescript',

paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
  'app': 'app', // 'dist',

  // angular bundles
  '@angular/core': 'npm:@angular/[email protected]/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/[email protected]/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/[email protected]/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/[email protected]/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/[email protected]/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/[email protected]/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/[email protected]/bundles/router.umd.js',

  // angular testing umd bundles
  '@angular/core/testing': 'npm:@angular/[email protected]/bundles/core-testing.umd.js',
  '@angular/common/testing': 'npm:@angular/[email protected]/bundles/common-testing.umd.js',
  '@angular/compiler/testing': 'npm:@angular/[email protected]/bundles/compiler-testing.umd.js',
  '@angular/platform-browser/testing': 'npm:@angular/[email protected]/bundles/platform-browser-testing.umd.js',
  '@angular/platform-browser-dynamic/testing': 'npm:@angular/[email protected]/bundles/platform-browser-dynamic-testing.umd.js',
  '@angular/http/testing': 'npm:@angular/[email protected]/bundles/http-testing.umd.js',
  '@angular/router/testing': 'npm:@angular/[email protected]/bundles/router-testing.umd.js',

  // other libraries
  'rxjs': 'npm:[email protected]',
  'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',

  'esri': 'http://js.arcgis.com/4.0/esri'
},

// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular2-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  },
  '@types/highcharts': {defaultExtension: 'ts'}
}
});
})(this);

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": ["jsapi4-angular2/node_modules/", "jsapi4-angular2/typings/"]
  },
  "exclude": [
    "node_modules/zone.js",
    "node_modules/concurrently",
    "node_modules/lite-server",
    "node_modules/typescript",
    "node_modules/typings",
    "node_modules/reflect-metadata",
    "node_modules/rxjs",
    "node_modules/tslint",
    "bower_components",
    "typings/main",
    "typings/main.d.ts"
  ]
}

esriSystemLoadBrowser.js

// load esri modules needed by this application
// into a System.js module called esri
console.log("Loading esri modules: ", esriLoadConfig.modules);
start = performance.now();
esriSystem.register(esriLoadConfig.modules, function () {
  // then bootstrap application
  end = performance.now();
  time = end - start;
  console.log('Loaded esri modules', time / 1000.0);
  System.config({
      transpiler: 'typescript'
  });
  System.import('app/main').then(function () {
    console.log('app/main imported');
  }, function (error) {
    console.log("System import error:", error);
  });
});

Answer 1

In the compilerOptions in tsconfig try replacing typeRoots with types explicitly listing the names of the type definition files that it can't find:

types:[...]

Also, use "module": "commonjs"