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>

項目結構

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

首先，我假設你已經檢查過打字稿確實生成'.js'文件，當你建立這個包。其次，很可能您在瀏覽器控制檯中出現錯誤。所以我建議使用chrome並查看錯誤是什麼，然後將其添加到您的帖子中。 – RoninCoder

@哈尼請參閱編輯，typescript確實生成.js文件。 – Grim

另外，儘可能快地轉移到RC1，因爲它可以更輕鬆地遷移到以後的RC版本或最終版本。 – RoninCoder

你需要@angular/core，@angular/common ...等使用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>

請注意，您應該刪除從index.html

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

以下

上面的代碼是取自頁面最底部的angular2 quick start page。

來源

2016-05-31 20:07:50 Abdulrahman

非常感謝你 – Grim

Angular 2和Eclipse - 無法加載資源：服務器響應的狀態爲404

回答

相關問題