将http:// localhost:4200 / app / subjects.component.js加载为" ./ subjects.component"时出错来自http:// localhost:4200 / app / app.routes.js

时间:2016-07-25 14:40:29

标签: angular angular2-routing

这些错误的可能含义是什么? 未捕获的ReferenceError:未定义require

获取http://localhost:4200/traceur 404(未找到)

潜在的未处理拒绝[5]错误:XHR错误(404 Not Found)loading http://localhost:4200/traceur         在XMLHttpRequest.wrapFn [as _onreadystatechange](http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)         在ZoneDelegate.invokeTask(http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)         在Zone.runTask(http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)         在XMLHttpRequest.ZoneTask.invoke(http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)     加载http://localhost:4200/traceur时出错     将http://localhost:4200/app/subjects.component.js加载为" ./ subjects.component"来自http://localhost:4200/app/app.routes.js

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

}

1 个答案:

答案 0 :(得分:0)

在提出这个问题时要记住,我不确定这个建议会对你有所帮助。然而,对于其他任何接收它的人(我使用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'}, };