title: Angular 2 router System is undefined in ES5
body: <p>I am trying to learn Angular 2 with ES5. But I am stuck at routing. I followed the tutorial in angular.io and added the following scripts in my <code>index.html</code> -</p>
  
  <pre><code>&lt;script src="node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/rxjs/bundles/Rx.umd.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/angular2/bundles/angular2-all.umd.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>It worked all fine until I tried adding </p>
  
  <pre><code>&lt;script src="node_modules/angular2/bundles/router.dev.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>After adding this I get the following error</p>
  
  <pre><code>System is undefined 
  </code></pre>
  
  <p>I can see that <code>router.dev.js</code> uses <code>System</code> variable which is not defined. 
  How can I solve this?</p>
  
  <p>After adding </p>
  
  <pre><code>&lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I am getting the following error - </p>
  
  <pre><code>EXCEPTION: No provider for Route! (class3 -&gt; Route)
  </code></pre>
  
  <h2>main.js</h2>
  
  <pre><code>(function (app) {
      document.addEventListener('DOMContentLoaded', function () {
          ng.platform.browser.bootstrap(app.AppComponent, [ng.router.ROUTER_PROVIDERS]);
      });
  })(window.app || (window.app = {}));
  </code></pre>
  
  <h2>app.component.js</h2>
  
  <pre><code>(function (app) {
      //Heroes Detail Component
      app.HeroDetailComponent = ng.core.Component({
          selector: 'my-hero-detail',
          templateUrl: 'hero-detail.html',
          inputs: ['hero']
      }).Class({
          constructor: function () {
  
          }
      });
  
      //Heroes Component
      app.HeroesComponent = ng.core.Component({
          selector: "my-heroes",
          templateUrl: 'heroes.html',
          styleUrls: ['style.css'],
          directives: [app.HeroDetailComponent]
      }).Class({
          constructor: [app.HeroService, function (_heroService) {
              this.title = 'Tour of Heroes';
              this._heroService = _heroService;
          }],
          ngOnInit: function () {
              this.getHeroes();
          },
          onSelect: function (hero) {
              this.selectedHero = hero;
          },
          getHeroes: function () {
              this._heroService.getHeroes().then(heroes =&gt; this.heroes = heroes);
          }
      });
  
      //App Component
      app.AppComponent = ng.core.Component({
          selector: 'my-app',
          templateUrl: 'app.html',
          directives: [app.HeroesComponent, ng.router.ROUTER_DIRECTIVES],
          providers: [app.HeroService]
      }).Class({
          constructor: [ng.router.Route, function (_router) {
              this.title = 'Tour of Heroes';
              this._router = _router;
          }]
      });
  
      //Route config
      app.AppComponent = ng.router.RouteConfig([
          {
              path: '/heroes',
              name: 'Heroes',
              component: app.HeroesComponent
          }
      ])(app.AppComponent);
  })(window.app || (window.app = {}));
  </code></pre>
  
  <h2>app.service.js</h2>
  
  <pre><code>(function (app) {
      app.HeroService = ng.core.Class({
          constructor: function () {
              this.HEROES = [
                  { "id": 11, "name": "Mr. Nice" },
                  { "id": 12, "name": "Narco" },
                  { "id": 13, "name": "Bombasto" },
                  { "id": 14, "name": "Celeritas" },
                  { "id": 15, "name": "Magneta" },
                  { "id": 16, "name": "RubberMan" },
                  { "id": 17, "name": "Dynama" },
                  { "id": 18, "name": "Dr IQ" },
                  { "id": 19, "name": "Magma" },
                  { "id": 20, "name": "Tornado" }
              ];
          },
          getHeroes: function () {
              return Promise.resolve(this.HEROES);
          },
          getHeroesSlowly: function () {
              return new Promise(resolve =&gt;
                  setTimeout(() =&gt; resolve(this.HEROES), 2000) // 2 seconds
                  );
          }
      });
  })(window.app || (window.app = {}));
  </code></pre>
  
  <p>I am trying to convert the Heroes Tutorial in ES5 from angular.io.</p>
  
  <h1>TL;DR/Solution</h1>
  
  <ol>
  <li>ES5 or <code>angular2-all.umd.js</code> doesn't require <code>router.dev.js</code></li>
  <li>Error was caused by misspelling. <code>ng.router.Route</code> should be <code>ng.router.Router</code></li>
  </ol>