2016-05-09 38 views
11

Używam kątowego-cli dla mojej aplikacji Angular2. Ilekroć próbuję załadować angular2/HTTP w moich components/Usługi żaden błąd pokazuje w terminalu cli ale w konsoli mojego przeglądarki pokazuje to -Błąd: Błąd XHR (404 nie znaleziono) loading kątowy2/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

Moja kątowe-cli wersja to 0.0.39

węzeł : 4.2.2

Tu idzie mój system-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 }); 

i mój 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" 
    } 
} 

i mój 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

Którą z wersji kątowych używasz? – Dinistro

Odpowiedz

6

Znalazłem rozwiązanie. I nie był przy użyciu wersji beta angular2 Więc musiałem otworzyć package.json i dodać tę linię pod zależnościami

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

Potem otworzyłem terminal i wpisywanych

npm install 

aktualizowany mój system -config.ts z

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 */ 
]; 

gdzie było

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 */ 
]; 
+2

właśnie zaoszczędziłeś mi godziny;) – wzr1337

8

myślę, że zapomniał dołączyć plik http.dev.js w głównym pliku HTML:

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

Należy pamiętać, że dotyczy to tylko wersji beta (nie rc ones), ale ponieważ używasz modułu angular2/http, domyślam się, że używasz wersji beta.

+0

Zrobiłem, ale to nie działało :(Czy muszę dodać więcej kodu? –

+0

W rzeczywistości, gdy SystemJS próbuje załadować moduły takie jak to, to dlatego, że nie może go znaleźć w tych wstępnie zarejestrowanych (z angular2.dev) .js, http.dev.js, ...). –

+0

Czy możesz podać zawartość głównego pliku HTML (elementy skryptu i konfigurację SystemJS)? Którą wersję Angular2 używasz? Dziękujemy! –