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，看起来正确

我的主要内容：

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

和我的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: "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';

未找到XHR错误（404）Angular 2

1 个答案: