Error loading http://localhost:4200/app/subjects.component.js as “./subjects.component” from http://localhost:4200/app/app.routes.js

Question

What could be the possible meaning of these errors? Uncaught ReferenceError: require is not defined

GET http://localhost:4200/traceur 404 (Not Found)

Here's my index.html:

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

  <script src="vendor/core-js/client/core.js"></script>
  <script src="vendor/reflect-metadata/Reflect.js"></script>
  <script src="vendor/zone.js/dist/zone.js"></script>
  <script src="vendor/systemjs/dist/system-polyfills.js"></script>
  <script src="vendor/systemjs/dist/system.src.js"></script>
  <script src="vendor/@angular/http/http.js"></script>

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

app.routes.ts:

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)
];

subjects.component.ts:

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<this.classes1.length;i++) {
          if (this.classes1[i].state === true) {
             counter++;
          }}

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

}

Stephen Paul Stephen Paul · Accepted Answer · 2016-09-12T06:56:52

Bearing in mind when this question was asked, I'm not sure that this advice will help you. Nevertheless, for anyone else receiving it (and I did using the Angular CLI, while upgrading from RC.5 to RC.6) just make the following update to your system-config.ts:

const packages: any = {
'rxjs' : {main: 'Rx'},
'@angular/core' : {main: 'bundles/core.umd.min.js', format: 'cjs'},
'@angular/common' : {main: 'bundles/common.umd.min.js', format: 'cjs'},
'@angular/compiler' : {main: 'bundles/compiler.umd.min.js', format: 'cjs'},
'@angular/forms' : {main: 'bundles/forms.umd.min.js', format: 'cjs'},
'@angular/router' : {main: 'bundles/router.umd.min.js', format: 'cjs'},
'@angular/platform-browser' : {main: 'bundles/platform-browser.umd.min.js', format: 'cjs'},
'@angular/platform-browser-dynamic': {main: 'bundles/platform-browser-dynamic.umd.min.js', format: 'cjs'},
'@angular/http' : {main: 'bundles/http.umd.min.js'}, };

Error loading http://localhost:4200/app/subjects.component.js as “./subjects.component” from http://localhost:4200/app/app.routes.js

1 Answers