XHR Fehler (404) nicht gefunden Winkel 2

Question

Ich habe Probleme beim Laden einer Komponente. Wenn ich eine andere Komponente zu laden, erhalte ich die folgenden Fehler

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

Meinen 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"; 
} 

, die die tutorial nach, richtig

Meinen main.ts sieht :

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

und meine Spieler-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 
    }; 

} 

und meine 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); 

Ich war nur das Tutorial folgen und einige Variablennamen zu ändern und ich weiß wirklich nicht, warum dieser Fehler nach oben knallt und ich kann Ich finde nicht viel über den Fehler online.

Answer 1

Ich denke, es liegt daran, dass Sie die Erweiterung ".ts" in Ihrem Import in Ihrer app.component.ts-Datei enthalten. Sie entfernen möchten, dass, glaube ich ...

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

Answer 2

Es gibt eine Chance, die Person, die das Tutorial auf der Dokumentationsseite stellen nicht die richtige Version der Datei systemjs.config.js gelegt hat. Es stellt sich heraus, dass der Abschnitt, der die Indexdatei definiert, eine Erweiterung .js hat, während die verwendete Datei index.html ist.

ändern

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

zu

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