CODEWITHSUNDEEP
angularjstypescript
Brandyn
Brandyn

Reputation: 1017

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

@Component({
    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';
bootstrap(AppComponent);

and my player-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: "[email protected]",
        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 = [
        '@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);

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.

Upvotes: 1

Views: 5072

Answers (2)

Willa
Willa

Reputation: 756

There is a chance the person who put the tutorial on the documentation page did not put the right version of the systemjs.config.js file. It turns out the section that defines the index file has a .js extension while the file used is index.html.

Change

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

to

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

Upvotes: 0

sourdoughdetzel
sourdoughdetzel

Reputation: 664

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

Upvotes: 2

Related Questions