2016-05-09 17 views
11

私はAngular2アプリケーションにangular-cliを使用しています。私は私のコンポーネント/サービスにangular2/HTTPをロードしようとするたびにエラーがCLI端末に示していないが、私のブラウザのコンソールで、これは示して - 私の角度-cliのバージョンは0.0.39エラー:XHRエラー(404が見つかりません)loading angular2/http

ノード

GET http://localhost:4200/angular2/http 404 (Not Found)

Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/angular2/http at XMLHttpRequest.desc.set.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30) at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38) at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48) at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34) Error loading http://localhost:4200/angular2/http as "angular2/http" from http://localhost:4200/app/js-tree.component.js ; Zone: ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/angular2/http at XMLHttpRequest.desc.set.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30) at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38) at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48) at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34) Error loading http://localhost:4200/angular2/http as "angular2/http" from http://localhost:4200/app/js-tree.component.js

ある

:ここでは4.2.2

は私のシステム-config.ts

const map: any = { 
}; 

/** User packages configuration. */ 
const packages: any = { 
}; 


const barrels: string[] = [ 
    // Angular specific barrels. 
    '@angular/core', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/http', 
    '@angular/router', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 

    // Thirdparty barrels. 
    'rxjs', 

    // App specific barrels. 
    'app', 
    'app/shared', 
    'app/tree', 
    'app/tree/item', 
    /** @cli-barrel */ 
]; 

const cliSystemConfigPackages: any = {}; 
barrels.forEach((barrelName: string) => { 
    cliSystemConfigPackages[barrelName] = { main: 'index' }; 
}); 

/** Type declaration for ambient System. */ 
declare var System: any; 

// Apply the CLI SystemJS configuration. 
System.config({ 
    map: { 
    '@angular': 'vendor/@angular', 
    'rxjs': 'vendor/rxjs', 
    'main': 'main.js' 
    }, 
    packages: cliSystemConfigPackages 
}); 

// Apply the user's configuration. 
System.config({ map, packages }); 

そして、私のpackage.json

を行きます
{ 
    "name": "pankha", 
    "version": "0.0.0", 
    "license": "MIT", 
    "angular-cli": {}, 
    "scripts": { 
    "start": "ng server", 
    "postinstall": "typings install", 
    "lint": "tslint \"src/**/*.ts\"", 
    "format": "clang-format -i -style=file --glob=src/**/*.ts", 
    "pree2e": "webdriver-manager update", 
    "e2e": "protractor" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.1", 
    "@angular/compiler": "2.0.0-rc.1", 
    "@angular/core": "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", 
    "es6-shim": "^0.35.0", 
    "reflect-metadata": "0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "systemjs": "0.19.26", 
    "zone.js": "^0.6.12" 
    }, 
    "devDependencies": { 
    "angular-cli": "0.0.*", 
    "clang-format": "^1.0.35", 
    "codelyzer": "0.0.14", 
    "ember-cli-inject-live-reload": "^1.4.0", 
    "jasmine-core": "^2.4.1", 
    "jasmine-spec-reporter": "^2.4.0", 
    "karma": "^0.13.15", 
    "karma-chrome-launcher": "^0.2.3", 
    "karma-jasmine": "^0.3.8", 
    "protractor": "^3.3.0", 
    "ts-node": "^0.5.5", 
    "tslint": "^3.6.0", 
    "typescript": "^1.8.10", 
    "typings": "^0.8.1" 
    } 
} 

と私のindex.html

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Pankha</title> 
    <base href="/"> 
    {{content-for 'head'}} 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Service worker support is disabled by default. 
     Install the worker script and uncomment to enable. 
     Only enable service workers in production. 
    <script type="text/javascript"> 
    if ('serviceWorker' in navigator) { 
     navigator.serviceWorker.register('/worker.js').catch(function(err) { 
     console.log('Error installing service worker: ', err); 
     }); 
    } 
    </script> 
    --> 
</head> 
<body> 
    <pankha-app>Loading...</pankha-app> 

    <script src="vendor/es6-shim/es6-shim.js"></script> 
    <script src="vendor/reflect-metadata/Reflect.js"></script> 
    <script src="vendor/systemjs/dist/system.src.js"></script> 
    <script src="vendor/zone.js/dist/zone.js"></script> 
    <!-- <script src="node_modules/angular2/bundles/http.dev.js"></script> --> 




    <script> 
    System.import('system-config.js').then(function() { 
     System.import('main'); 
    }).catch(console.error.bind(console)); 
    </script> 
</body> 
</html> 
+0

どの角度バージョンをお使いですか? – Dinistro

答えて

6

解決策が見つかりました。私は私のpackage.jsonを開き、その後、私は私のターミナルを開いて、それは私のシステムを更新

npm install 

を入力

"@angular/http": "2.0.0-rc.1", 

依存関係の下で、この行を追加するので、私が持っていたのangular2 のベータ版を使用していませんでしたそれは

const barrels: string[] = [ 
    // Angular specific barrels. 
    '@angular/core', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/router', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 

    // Thirdparty barrels. 
    'rxjs', 

    // App specific barrels. 
    'app', 
    'app/shared', 
    'app/tree', 
    'app/tree/item', 
    /** @cli-barrel */ 
]; 
01であった

const barrels: string[] = [ 
    // Angular specific barrels. 
    '@angular/core', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/http', 
    '@angular/router', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 

    // Thirdparty barrels. 
    'rxjs', 

    // App specific barrels. 
    'app', 
    'app/shared', 
    'app/tree', 
    'app/tree/item', 
    /** @cli-barrel */ 
]; 

と-config.ts

+2

あなたは私の時間を節約しました;) – wzr1337

8

を私はあなたのメインのHTMLファイルにhttp.dev.jsファイルを含めるのを忘れていることを考える:

<script src="node_modules/angular2/bundles/http.dev.js"></script> 

これが唯一のベータ版にも適用されることに注意してください(ではありませんあなたはangular2/httpモジュールを使用しているので、ベータ版を使用していると思います。

+0

私はそれをしましたが、それはうまくいきませんでした:(もっとコードを追加する必要がありますか? –

+0

実際、SystemJSはあらかじめ登録されているものを見つけることができないため、 .js、http.dev.js、...)。 –

+0

HTMLメインファイルの内容(スクリプト要素とSystemJS設定)を提供できますか?使用しているAngular2のバージョンはありますか?ありがとう! –

関連する問題