angular2 CLI HTTP erreur non trouvée

Question

J'ai créé une nouvelle application angular2 en utilisant le angular-cli. Maintenant, j'essayais d'obtenir les données d'une API en utilisant HTTP. Le code que j'ai écrit:

movies.service.ts

import { Injectable } from '@angular/core'; 
import { Movie } from './movie'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

Mon éditeur atomique donne erreur sur la ligne @angular/http. Alors, je l'ai installé manuellement à l'aide angular2npm install angular2 sur mon dossier de projet, puis modifier cette erreur ligne générée comme ceci:

import { Http, Response } from 'angular2/http'; 

mais maintenant ma console est affiché:

"NetworkError: 404 Not Found - http://localhost:4200/angular2/http/index.js "

J'ai ajouté dans mon index.html page, le script suivant:

<script src="https://code.angularjs.org/2.0.0-beta.17/http.dev.js"></script> 

et dans mon package.json fichiers dépendances "angular2": "2.0.0-beta.17",. toujours la même erreur.

Quelqu'un a la moindre idée? Je suis un débutant en angulaire2. Donc, toute aide ou suggestion est très appréciée.

Answer 1

Vous devez utiliser la version RC de angular2 et non la beta.17. L'importation de @angular est, autant que je sache, introduite dans la version RC.

Dans cette version, ils ont scindé angular2 dans plusieurs packages. Cela signifie que vous devez ajouter plusieurs packages en vous package.json.

"@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", 
"@angular/router-deprecated": "2.0.0-rc.1", 
"@angular/http": "2.0.0-rc.1" 

---

NOTE

Je ne l'ai pas testé, mais je travaille là-dessus.

Answer 2

Je pense que vous avez mélangé la version bêta et la version rc.

Dans les versions bêta, il existe des fichiers JS groupés qui préenregistrent les modules par leur nom. Quelque chose comme ça:

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

Dans ce cas, il n'y a pas besoin de configuration personnalisée pour les modules Angular2 dans SystemJS:

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

Avec la version rc, Angular2 ne fournissent pas (encore) et vous besoin de configurer explicitement SystemJS pour les modules angular2:

var map = { 
    'app':      'app', // 'dist', 
    'rxjs':      'node_modules/rxjs', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    '@angular':     'node_modules/@angular' 
}; 

var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { defaultExtension: 'js' }, 
}; 

var packageNames = [ 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router', 
    '@angular/router-deprecated', 
    '@angular/testing', 
    '@angular/upgrade', 
]; 

packageNames.forEach(function(pkgName) { 
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
}); 

var config = { 
    map: map, 
    packages: packages 
} 

if (global.filterSystemConfig) { global.filterSystemConfig(config); } 

System.config(config); 

Answer 3

Je suppose que vous n'êtes pas utiliser la version bêta de angular2 package donc ouvert.JSON et ajoutez cette ligne sous les dépendances

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

Ensuite, ouvrez le terminal et tapez

npm install 

Il mettra à jour votre système-config.ts avec

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

où il était

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

Alors maintenant vous peut utiliser

'@angular/http' 

au lieu de

'angular2/http'