从 http://localhost:4200/app/app.routes.js 将 http://localhost:4200/app/subjects.component.js 加载为“./subjects.component”时出错答案

【问题标题】：Error loading http://localhost:4200/app/subjects.component.js as "./subjects.component" from http://localhost:4200/app/app.routes.js从 http://localhost:4200/app/app.routes.js 将 http://localhost:4200/app/subjects.component.js 加载为“./subjects.component”时出错
【发布时间】：2016-11-28 23:18:46
【问题描述】：

这些错误的可能含义是什么？未捕获的 ReferenceError：未定义要求

GET http://localhost:4200/traceur 404（未找到）

这是我的 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;}
  }

}

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

请记住，当有人问这个问题时，我不确定这个建议是否会对您有所帮助。尽管如此，对于其他收到它的人（我确实使用了 Angular CLI，同时从 RC.5 升级到 RC.6）只需对您的 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'}, };

【讨论】：