Visual Studio 2015, ASP.NET 5, MVC 6, Angular 2.0 - Exception: Token must be defined

Question

I am trying to put together a project running ASP.NET 5 using MVC6 and angular 2.0

• My typescript version is 1.7.6
• VS2015 - Update 1
• Angular Version is beta 2

I have got it to the stage where most of the errors are

My package.json file looks like this:

{
  "name": "ASP.NET",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "angular2": "2.0.0-beta.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "systemjs": "^0.19.21",
    "zone.js": "0.5.14"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "2.5.2",
    "gulp-cssmin": "0.1.7",
    "gulp-uglify": "1.2.0",
    "rimraf": "2.2.8",
  }
}

My tsconfig.json file looks like this:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../wwwroot/appScripts/",
    "removeComments": false,
    "sourceMap": true,
    "target": "es6"
  },
  "exclude": [
    "node_modules"
  ]
}

My app.ts:

"use strict"
import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: 'My First Angular 2 App'
})
export class AppComponent { }

and my boot.ts:

"use strict"
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app'
bootstrap(AppComponent);

lastly my html file looks like this

<script src="~/lib/angular2/es6-shim.min.js"></script>
<script src="~/lib/angular2/system-polyfills.js"></script>
<script src="~/lib/angular2/angular2-polyfills.js"></script>
<script src="~/lib/angular2/system.js"></script>
<script src="~/lib/angular2/rx.js"></script>
<script src="~/lib/angular2/angular2.dev.js"></script>
        <script>
            System.config({
                packages: {
                    appScripts: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
        </script>
        <script>

            System.import('appScripts/boot')
                  .then(null, console.error.bind(console));
        </script>

Finally the actual error stack

EXCEPTION: Token must be defined!
BrowserDomAdapter.logError @ angular2.dev.js:23083
BrowserDomAdapter.logGroup @ angular2.dev.js:23094
ExceptionHandler.call @ angular2.dev.js:1185
(anonymous function) @ angular2.dev.js:12734
Zone.run @ angular2-polyfills.js:1243
(anonymous function) @ angular2.dev.js:13438
NgZone.run @ angular2.dev.js:13400
ApplicationRef_.bootstrap @ angular2.dev.js:12712
bootstrap @ angular2.dev.js:24805
**execute @ boot.ts:4**
u @ system.js:5
execute @ system.js:5
b @ system.js:4
x @ system.js:4
p @ system.js:4
h @ system.js:4
(anonymous function) @ system.js:4
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468
lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480
lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451
(anonymous function) @ angular2-polyfills.js:123
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$asap$$flush @ angular2-polyfills.js:262

Any help would be appreciated. I believe it's happening whilst bootstrapping the application I notice the execute is happening on boot.ts rather than my generated boot.js file - I'm not sure if this is part of the problem or not.

Answer 1

Because you defined an outDir property, I think that you should add a map entre in your SystemJS configuration.

You could try something like that:

<script>
  System.config({
    map: {
      appScripts: 'wwwroot/ appScripts'
    },
    packages: {
      appScripts: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
</script>

Make sure that the wwwroot folder is accessible through your web server.