How to make systemjs module loading work with .net mvc?

I grabbed the ng-book 2 as it seemed like a quality way to figure out Angular2. As a heads up, I've never used any of these module loaders or anything before and I've had very limited use of npm and node so all the terminology and assumed knowledge can be quite confusing.
ng-book 2 uses node but I figured I might as well start off using my usual .NET MVC server as that is what I'll be pairing Angular 2 with at work.

My current issue is apparently in the module loading, as I just keep getting 404 errors when systemjs is trying to load angular packages.

app.ts

/**
* A basic hello-world Angular 2 app
*/
import {
    NgModule,
    Component
} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@Component({
    selector: 'hello-world',
    template: `
        <div>
            Hello World
        </div>
    `
})
class HelloWorld {
}

@NgModule({
    declarations: [HelloWorld],
    imports: [BrowserModule],
    bootstrap: [HelloWorld]
})
class HelloWorldAppModule { }

platformBrowserDynamic().bootstrapModule(HelloWorldAppModule);

systemjs.config.js

// See also: https://angular.io/docs/ts/latest/quickstart.html
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app/app',
    'rxjs':                       'app/node_modules/rxjs',
    '@angular':                   'app/node_modules/@angular'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'rxjs': { defaultExtension: 'js' }
  };

  var angularPackages = [
    'core',
    'common',
    'compiler',
    'platform-browser',
    'platform-browser-dynamic',
    'http',
    'router',
    'forms',
    'upgrade'
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  angularPackages.forEach(function(pkgName) {
    packages['@angular/' + pkgName] = { 
      main: 'bundles/' + pkgName + '.umd.js', 
      defaultExtension: 'js' 
    };
  });

  var config = {
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

index.cshtml

<!DOCTYPE html>
<html>
    <head>
        <title>Angular 2 - Simple Reddit</title>

        <script src="~/app/node_modules/core-js/client/shim.min.js"></script>
        <script src="~/app/node_modules/zone.js/dist/zone.js"></script>
        <script src="~/app/node_modules/reflect-metadata/Reflect.js"></script>
        <script src="~/app/node_modules/systemjs/dist/system.src.js"></script>

        <link rel="stylesheet" type="text/css" href="~/app/resources/vendor/semantic.min.css" />
        <link rel="stylesheet" type="text/css" href="~/app/styles.css" />
    </head>
    <body>
        <script resource="~/app/resources/systemjs.config.js"></script>
        <script>
            System.import('/app/app.js')
                .then(null, console.error.bind(console));
        </script>

        <hello-world></hello-world>

    </body>
</html>

The layout of the project is like this

And what I end up getting with this are requests like

zone.js:101 GET http://localhost:18481/@angular/core 404 (Not Found)

Solution

The first thing I see is that probably your systemjs config is not applied, because you have

   <script resource="~/app/resources/systemjs.config.js"></script>

Why do you have resource here? systemjs.config.js contains plain javascript code that should be executed like any other script.