Angular 2和Eclipse-加载资源失败：服务器以404状态响应

所以我在angular 2中显示第一个组件时遇到了问题。我跟着这个 我遵循了5分钟快速入门指南 让我的第一个组件工作。我没有在控制台中得到错误或任何东西，但我确实看到加载。。。。在浏览器中。有人知道我做错了什么吗

package.json文件

{
  "name": "budget_calculator",
  "version": "1.0.0",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.6"
  }
}

梅因酒店

import { bootstrap }    from '@angular/platform-browser-dynamic';

import { Navigation } from './components/nav.component';

bootstrap(Navigation);

导航组件

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

@Component({
    selector: 'my-app',
    template: '<h1>Angular 2 is present</h1>'
})

export class Navigation {

}

Javascript控制台错误

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (app, line 0)
[Error] Error: invoke@http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:323:34
    runGuarded@http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:230:54
    http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:206:40


Error loading http://localhost:8080/BudgetCalculator/app

(anonymous function) (index.html:19)
invoke (zone.js:323)
run (zone.js:216)
(anonymous function) (zone.js:571)
invokeTask (zone.js:356)
runTask (zone.js:256)
drainMicroTaskQueue (zone.js:474)
g (shim.min.js:8:10178)
(anonymous function) (shim.min.js:8:10300)
k (shim.min.js:8:14323)

---

您需要映射包

@angular/core

，

@angular/common

。。。etc使用systemjs。否则，它怎么知道在哪里找到它们

创建一个名为

systemjs.config.js的新文件

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // 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 ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

然后，在
index.html
中导入您创建的文件：

<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

上面的代码取自页面底部。
首先，我假设您已经检查了typescript在构建包时是否确实生成了
.js
文件。其次，您很可能在浏览器控制台中遇到错误。因此，我建议使用chrome并查看错误所在，然后将其添加到您的帖子中。@Hani请参阅编辑，typescript会生成.js文件。此外，请尽快移动到RC1，因为这样可以更容易地迁移到以后的RC版本或最终版本。删除templateUrl并将其设置为template。它应该第二次检查您是否正在为webserver中的404错误路径提供服务，并且它是一个可读的文件夹。试试../node\u模块相对路径非常感谢
/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // 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 ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

System.config({
    packages: {
        app: {
             format: 'register',
             defaultExtension: 'js'
        }
    }
});