XHR错误（404）未找到Angular 2

Question

我在加载组件时遇到问题。当我去加载另一个组件，我收到以下错误

localhost/:22 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/app/player-detail.component.ts.js(…) 

我app.component.ts：

import { Component } from '@angular/core'; 
import { PlayerDetailComponent } from './player-detail.component.ts'; 

@Component({ 
    selector: "my-app", 
    templateUrl: 'app/views/app.component.html', 
    directives: [PlayerDetailComponent], 
}) 

export class AppComponent { 
    title = "title"; 
} 

其中根据tutorial，相貌端正

我main.ts ：

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import {AppComponent} from './app.component'; 
bootstrap(AppComponent); 

和我的球员detail.component.ts：

import { Component } from '@angular/core'; 

import { Player } from './classes/player'; 

@Component({ 
    selector: "player-details", 
    template: `<h2>Hello</h2>`, 
}) 

export class PlayerDetailComponent { 
    player: Player = { 
     id: 1, 
     name: "Test Player", 
     email: "test@email.com", 
     level: 0, 
     maxHealth: 100, 
     health: 100, 
     maxEnergy: 100, 
     energy: 100, 
     fun: 1, 
     skill: 1, 
     knowledge: 1 
    }; 

} 

和我system.config.js：

(function(global) { 

    // map tells the System loader where to look for things 
    var map = { 
     'app':      'app', // 'dist', 
     'rxjs':      'node_modules/rxjs', 
     'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
     '@angular':     'node_modules/@angular' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
     'app':      { main: 'main.js', defaultExtension: 'js' }, 
     'rxjs':      { defaultExtension: 'js' }, 
     'angular2-in-memory-web-api': { defaultExtension: 'js' }, 
    }; 

    var packageNames = [ 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/core', 
     '@angular/http', 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/router', 
     '@angular/router-deprecated', 
     '@angular/testing', 
     '@angular/upgrade', 
    ]; 

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } 
    packageNames.forEach(function(pkgName) { 
     packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    }); 

    var config = { 
     map: map, 
     packages: packages 
    } 

    // filterSystemConfig - index.html's chance to modify config before we register it. 
    if (global.filterSystemConfig) { global.filterSystemConfig(config); } 

    System.config(config); 

})(this); 

我刚才一直都在教程和改变一些变量名，我真的不知道为什么这个错误是雨后春笋般冒出来，我可以似乎没有找到关于在线错误的很多信息。

Answer 1

我想这是因为你在你的app.component.ts文件中导入了“.ts”扩展名。要删除，我相信......

import { Component } from '@angular/core'; 
import { PlayerDetailComponent } from './player-detail.component'; 

Answer 2

有机会的话谁把教程文档页面上没放systemjs.config.js文件的正确版本的人。事实证明，定义索引文件的部分具有.js扩展名，而使用的文件是index.html。

变化

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

到

'angular2-in-memory-web-api': { main: 'index.html', defaultExtension: 'js' }