Angular 加载错误http://localhost:4200/app/subjects.component.js “作为”/主题.组成部分“；从…起http://localhost:4200/app/app.routes.js_Angular_Angular2 Routing

Angular 加载错误http://localhost:4200/app/subjects.component.js “作为”/主题.组成部分“；从…起http://localhost:4200/app/app.routes.js

angular

Angular 加载错误http://localhost:4200/app/subjects.component.js “作为”/主题.组成部分“；从…起http://localhost:4200/app/app.routes.js,angular,angular2-routing,Angular,Angular2 Routing,这些错误的可能含义是什么？未捕获引用错误：未定义require 获取404（未找到）可能未处理的拒绝[5]错误：XHR错误（404未找到）加载在XMLHttpRequest.wrapFn[as _onreadystatechange]（）在ZoneDelegate.invokeTask（）上在Zone.runTask（）处在XMLHttpRequest.ZoneTask.invoke（）处加载错误从中加载“/subjects.component”时出错这是我的index.htm

这些错误的可能含义是什么？未捕获引用错误：未定义require

获取404（未找到）

可能未处理的拒绝[5]错误：XHR错误（404未找到）加载在XMLHttpRequest.wrapFn[as _onreadystatechange]（）在ZoneDelegate.invokeTask（）上在Zone.runTask（）处在XMLHttpRequest.ZoneTask.invoke（）处加载错误从中加载“/subjects.component”时出错

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

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/core'导入{Component}；
从“@angular/platform browser dynamic”导入{bootstrap}；
从'@angular2 material/button'导入{MdButton}；
从“@angular2物料/卡片”导入{MdCard}；
从“@angular2 material/toolbar”导入{MdToolbar}；
从“@angular2 material/icon”导入{MdIcon，MdIconRegistry}；
从'@angular2 material/tabs'导入{MdTab}；
从'@angular2 material/INPUT'导入{MdInput，MD_INPUT_DIRECTIVES}；
从“@angular2 material/checkbox”导入{MdCheckbox}；
从“@angular/ROUTER”导入{ROUTER_DIRECTIVES}”；
从“@angular/router”导入{provideRouter，RouterConfig}；
从“./profileDetails.component”导入{ProfileDetailsComponent}；
//从“./agreement.component”导入{AgreementComponent}；
@组成部分({
选择器：'受试者'，
templateUrl:'app/subjects.component.html'，
样式URL:['app/app.component.css']，
指令：[//AgreementComponent，
MdButton、MdCard、MdToolbar、MdIcon、MdInput、MD_输入_指令、MdCheckbox、ProfileDetails组件、路由器_指令]，
提供者：[注册中心]
})
导出类主题组件{
private buttonState:boolean=true；
私有类1=[{label:'English'，state:false}，{label:'Hindi'，state:false}，{label:'Mathematics'，state:false}，{label:'Science'，state:false}，{label:'Computer Science'，state:false}，{label:'Environmental Studies'，state:false}，{；
setButtonState（）{
设计数器=0；
对于（设i=0；i=1）{this.buttonState=false；}
else{this.buttonState=true；}
}
}

记住当有人问这个问题时，我不确定这个建议是否对你有帮助。然而，对于其他接收到它的人（我使用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'}, };

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'}, };