ReallyGoodPie ReallyGoodPie - 2 years ago 599
AngularJS Question

XHR Error (404) not found Angular 2

I'm having issues loading a component. When I go to load another component, I get the following error

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

My app.component.ts:

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

selector: "my-app",
templateUrl: 'app/views/app.component.html',
directives: [PlayerDetailComponent],

export class AppComponent {
title = "title";

Which according to the tutorial, looks correct

My main.ts:

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

and my player-detail.component.ts:

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

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

selector: "player-details",
template: `<h2>Hello</h2>`,

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


and my 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 = [

// 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); }



I have just been following the tutorial and changing some variable names and I really don't know why this error is popping up and I can't seem to find much about the error online.

Answer Source

I think it's because you are including the ".ts" extension in your import in your app.component.ts file. You want to remove that, I believe...

import { Component } from '@angular/core';
import { PlayerDetailComponent } from './player-detail.component';
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download