Angular 2 Error "Unconnect ReferenceError: module not defined" in systemjs-angular-loader.js

I am trying to use Angular 2 in the same application as Angular 1. For this I am using the Angular UpgradeModule. To install and configure TypeScript and Angular 2, I used the following tutorial: Upgrading from AngularJS .

My Angular 1 version is 1.4.8, Angular is 4.0.3 and TypeScript is 2.3.2.

My tsconfig.json looks like this:

{
"compilerOptions": {
"target": "es5",
"module": "umd",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
  "../../node_modules/@types/"
],
"types": [
  "core-js"
]
},
"compileOnSave": true,
"exclude": [
  "node_modules/*",
  "**/*-aot.ts"
]
}

      

        
        
        
      

    

And my systemjs.config.js:

  (function (global) {
System.config({
paths: {
  // paths serve as alias
  'npm:': '/node_modules/'
},
// map tells the System loader where to look for things
map: {
    // our app is within the App/Angular2 folder
    'app': '/App/Angular2',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    defaultExtension: 'js',
    meta: {
      './*.js': {
        loader: 'systemjs-angular-loader.js'
      }
    }
  },
  rxjs: {
    defaultExtension: 'js'
  }
}
});
})(this);

      

        
        
        
      

    

I have a main.ts component in my project root folder that supports Angular 2 and Angular 1 modules:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './App/Angular2/app.module';

// This is the entry point for the AngularJS/Angular hybrid application.
// It bootstraps the Angular module 'AppModule' and the AngularJS module 
'mainApp'.
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.documentElement, ['mainApp']);
});

      

        
        
        
      

    

The problem I am facing is when I run my application in Visual Studio 2015 using F5 (or Debug), I get the following error in my browser's (Chrome) developer console:

Uncaught ReferenceError: module not defined in systemjs-angular-loader.js

What could be the problem?