Angular 2とEclipse - リソースを読み込めませんでした：サーバーは404という状態で応答しました

私は最初のコンポーネントを2番に表示する際に問題があります。これに続きましたpost to setup typescript. 5分クイックスタートガイドhere on Angular website 私の最初のコンポーネントが動作するようにします。コンソールに何かエラーや何も表示されませんが、ブラウザに読み込み中です。誰かが私が間違ったことを知っていますか？Angular 2とEclipse - リソースを読み込めませんでした：サーバーは404という状態で応答しました

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

main.ts

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

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

bootstrap(Navigation);

nav.component.ts

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

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

export class Navigation { 

}

index.htmlを

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <!-- Load libraries for Angular 2--> 
     <script src="node_modules/core-js/client/shim.min.js"></script> 
     <script src="node_modules/zone.js/dist/zone.js"></script> 
     <script src="node_modules/reflect-metadata/Reflect.js"></script> 
     <script src="node_modules/systemjs/dist/system.src.js"></script> 
     <!-- 2. Configure SystemJS --> 
     <script> 
      System.config({ 
       packages: { 
        app: { 
         format: 'register', 
         defaultExtension: 'js' 
        } 
       } 
      }); 
      System.import('./app/main').then(null, console.error.bind(console)); 
     </script> 
    </head> 

    <body> 
     <header> 
      <my-app> 
       Loading..... 
      </my-app> 
     </header> 
    </body> 
</html>

systemjsを使用してあなたのパッケージ @angular/core、 @angular/commonをマップする必要が

プロジェクト構造

node 
node_modules 
src 
    -> main 
    -> webapp 
     -> node_modules 
     -> app 
      -> components 
       - nav.component.js.map 
       - nav.component.d.ts 
       - nav.component.ts 
       - nav.component.js 
      - main.d.ts 
      - main.js 
      - main.js.map 
      - main.ts 
      - index.html

JavaScriptコンソールのエラー

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (app, line 0) 
[Error] Error: [email protected]://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:323:34 
    [email protected]://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)

出典

2016-05-31 Grim

最初に、あなたが実際にtypescriptがパッケージをビルドするときに '.js'ファイルを生成することを確認したとします。次に、ブラウザコンソールでエラーが発生する可能性が最も高いです。だから私はクロムを使用し、エラーがあなたのポストにそれを追加することを確認することをお勧めします。 – RoninCoder

@ハニー編集を参照してください、typescriptは.jsファイルを生成します。 – Grim

また、できるだけ早くRC1に移動すると、後のRCリリースまたは最終リリースに移行しやすくなります。 – RoninCoder

...など。そうでなければ、どこでそれらを見つけるかをどのように知るでしょうか？

作成したファイルをインポート、あなたのindex.htmlで、その後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

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

から以下を削除する必要があることを何卒ご了承下さい

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

を

上記のコードはページの一番下にあるangular2 quick start pageから取られています。

出典

2016-05-31 20:07:50 Abdulrahman

ありがとう – Grim

Angular 2とEclipse - リソースを読み込めませんでした：サーバーは404という状態で応答しました

答えて

関連する問題