Error loading http://localhost:4200/app/subjects.component.js as "./subjects.component" from http://localhost:4200/app/app.routes.js
<p>What could be the possible meaning of these errors?
Uncaught ReferenceError: require is not defined</p>

<p>GET <a href="http://localhost:4200/traceur" rel="nofollow">http://localhost:4200/traceur</a> 404 (Not Found)</p>

<p>Potentially unhandled rejection [5] Error: XHR error (404 Not Found) loading <a href="http://localhost:4200/traceur" rel="nofollow">http://localhost:4200/traceur</a>
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (<a href="http://localhost:4200/vendor/zone.js/dist/zone.js:769:30" rel="nofollow">http://localhost:4200/vendor/zone.js/dist/zone.js:769:30</a>)
        at ZoneDelegate.invokeTask (<a href="http://localhost:4200/vendor/zone.js/dist/zone.js:356:38" rel="nofollow">http://localhost:4200/vendor/zone.js/dist/zone.js:356:38</a>)
        at Zone.runTask (<a href="http://localhost:4200/vendor/zone.js/dist/zone.js:256:48" rel="nofollow">http://localhost:4200/vendor/zone.js/dist/zone.js:256:48</a>)
        at XMLHttpRequest.ZoneTask.invoke (<a href="http://localhost:4200/vendor/zone.js/dist/zone.js:423:34" rel="nofollow">http://localhost:4200/vendor/zone.js/dist/zone.js:423:34</a>)
    Error loading <a href="http://localhost:4200/traceur" rel="nofollow">http://localhost:4200/traceur</a>
    Error loading <a href="http://localhost:4200/app/subjects.component.js" rel="nofollow">http://localhost:4200/app/subjects.component.js</a> as "./subjects.component" from <a href="http://localhost:4200/app/app.routes.js" rel="nofollow">http://localhost:4200/app/app.routes.js</a></p>

<p>Here's my index.html: </p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Material2App&lt;/title&gt;
  &lt;base href="/"&gt;
  {{content-for 'head'}}
  &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;my-app&gt;Loading...&lt;/my-app&gt;

  &lt;script src="vendor/core-js/client/core.js"&gt;&lt;/script&gt;
  &lt;script src="vendor/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
  &lt;script src="vendor/zone.js/dist/zone.js"&gt;&lt;/script&gt;
  &lt;script src="vendor/systemjs/dist/system-polyfills.js"&gt;&lt;/script&gt;
  &lt;script src="vendor/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  &lt;script src="vendor/@angular/http/http.js"&gt;&lt;/script&gt;

  &lt;script&gt;
    System.import('system-config.js').then(function () {
      System.import('main');
    }).catch(console.error.bind(console));
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>app.routes.ts:</p>

<pre><code>import { provideRouter, RouterConfig } from '@angular/router';
import {SubjectsComponent} from './subjects.component';
import {BasicCardComponent} from './basicCard.component';


export const routes: RouterConfig = [

 { path: '', component: SubjectsComponent },

];

export const appRouterProviders = [
  provideRouter(routes)
];
</code></pre>

<p>subjects.component.ts:</p>

<pre><code>import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {MdButton} from '@angular2-material/button';
import {MdCard} from '@angular2-material/card';
import {MdToolbar} from '@angular2-material/toolbar';
import {MdIcon,MdIconRegistry} from '@angular2-material/icon';
import {MdTab} from '@angular2-material/tabs';
import {MdInput,MD_INPUT_DIRECTIVES} from '@angular2-material/input';
import {MdCheckbox} from '@angular2-material/checkbox';

import { ROUTER_DIRECTIVES} from '@angular/router';
import { provideRouter, RouterConfig } from '@angular/router';

import {ProfileDetailsComponent} from './profileDetails.component';
//import {AgreementComponent} from './agreement.component';

@Component({
    selector: 'subjects',
    templateUrl: 'app/subjects.component.html' ,
    styleUrls: ['app/app.component.css'],
    directives: [//AgreementComponent, 
    MdButton,MdCard,MdToolbar,MdIcon,MdInput,MD_INPUT_DIRECTIVES,MdCheckbox,ProfileDetailsComponent,ROUTER_DIRECTIVES],
     providers:[MdIconRegistry]
})

export class SubjectsComponent{

  private buttonState: boolean = true;

  private classes1 = [{label: 'English', state: false},{label:  'Hindi', state: false},{label:  'Mathematics', state: false},{label:  'Science', state: false},{label:  'Computer Science', state: false},{label:  'Social science', state: false},{label:  'Environmental Studies', state: false}];


  setButtonState() {
    let counter = 0;
    for(let i=0;i&lt;this.classes1.length;i++) {
          if (this.classes1[i].state === true) {
             counter++;
          }}

      if (counter &gt;= 1) { this.buttonState = false; }
      else {this.buttonState = true;}
  }

}
</code></pre>