EXCEPTION angulaire: aucun fournisseur pour Http


333

J'obtiens le EXCEPTION: No provider for Http!dans mon application angulaire. Qu'est-ce que je fais mal?

import {Http, Headers} from 'angular2/http';
import {Injectable} from 'angular2/core'


@Component({
    selector: 'greetings-ac-app2',
    providers: [],
    templateUrl: 'app/greetings-ac2.html',
    directives: [NgFor, NgModel, NgIf, FORM_DIRECTIVES],
    pipes: []
})
export class GreetingsAcApp2 {
    private str:any;

    constructor(http: Http) {

        this.str = {str:'test'};

        http.post('http://localhost:18937/account/registeruiduser/',
            JSON.stringify(this.str),
            {
                headers: new Headers({
                    'Content-Type': 'application/json'
                })
            });

3
Tu es absent HTTP_PROVIDERS.
Eric Martinez

1
import / export ... s'il vous plaît, n'importe qui, de quelle syntaxe s'agit-il?
vp_arth

5
C'est la syntaxe dactylographiée
Daniel

10
import / export - c'est la syntaxe JavaScript (ES6)
alexpods

3
Ce serait bien si l'une des réponses expliquait réellement pourquoi nous devons importer HttpModuleet ce qu'elle fait.
Drazen Bjelovuk

Réponses:


520

Importez le HttpModule

import { HttpModule } from '@angular/http';

@NgModule({
    imports: [ BrowserModule, HttpModule ],
    providers: [],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export default class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Idéalement, vous divisez ce code en deux fichiers distincts. Pour plus d'informations, lisez:


2
Dans la version bêta actuelle d'Angular2, le fichier est appelé app.ts.
d135-1r43

7
Dans les projets générés par angular-cli, le fichier est appelé main.ts.
filoxo

et si je n'ai pas de NgModule? Je suis en train de développer un module angular2 et il n'a pas de NgModule mais pour les tests j'ai besoin d'un fournisseur Http
iRaS

@Webruster, je viens de vérifier. Cela devrait encore fonctionner. Pouvez-vous me donner le code d'erreur exact?
Philip

2
@PhilipMiglinci ... merci pour la précieuse réponse .. en ajoutant quelques points pour les demandeurs que le fichier serait app.module.ts en angulaire 2.0 pour explication c'est le fichier de base du projet pour inclure les modules qui utiliseront plus hérités Des classes.
shaan gola

56

> = Angulaire 4,3

pour les introduits HttpClientModule

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // if used
    HttpClientModule,
    JsonpModule // if used
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Angulaire2> = RC.5

Importez HttpModuledans le module où vous l'utilisez (ici par exemple le AppModule:

import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // if used
    HttpModule,
    JsonpModule // if used
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

L'importation du HttpModuleest assez similaire à l'ajout HTTP_PROVIDERSdans la version précédente.


9

Avec la version Angular 2.0.0 du 14 septembre 2016, vous utilisez toujours HttpModule. Votre principal app.module.tsressemblerait à ceci:

import { HttpModule } from '@angular/http';

@NgModule({
   bootstrap: [ AppComponent ],
   declarations: [ AppComponent ],
   imports: [
      BrowserModule,
      HttpModule,
      // ...more modules...
   ],
   providers: [
      // ...providers...
   ]
})
export class AppModule {}

Ensuite, dans votre, app.tsvous pouvez démarrer en tant que tel:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/main/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

9

Ajoutez HttpModule au tableau des importations dans le fichier app.module.ts avant de l'utiliser.

import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    AppComponent,
    CarsComponent
  ],
  imports: [
    BrowserModule,
	HttpModule  
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


9

Depuis rc.5, vous devez faire quelque chose comme

@NgModule({
    imports: [ BrowserModule],
    providers: [ HTTP_PROVIDERS ],  
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export default class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);


5

Importez HttpModuledans votre fichier app.module.ts.

import { HttpModule } from '@angular/http';
import { YourHttpTestService } from '../services/httpTestService';

N'oubliez pas non plus de déclarer HttpModule sous les importations comme ci-dessous:

imports: [
    BrowserModule,
    HttpModule
  ],

4

La meilleure façon est de changer le décorateur de votre composant en ajoutant Http dans le tableau des fournisseurs comme ci-dessous.

@Component({
    selector: 'greetings-ac-app2',
    providers: [Http],
    templateUrl: 'app/greetings-ac2.html',
    directives: [NgFor, NgModel, NgIf, FORM_DIRECTIVES],
    pipes: []
})

Qui a mal marqué, puis-je savoir quelle est la raison?
Shivang Gupta

5
Je n'ai pas downvote, mais la raison est probablement que vous ne voulez pas un nouvel Httpobjet pour chaque composant. Mieux vaut en avoir un seul pour l'application, ce qui est accompli en l'important au NgModuleniveau.
Ted Hopp

3

à partir de RC5, vous devez importer le HttpModule comme ceci:

import { HttpModule } from '@angular/http';

incluez ensuite le HttpModule dans le tableau des importations comme mentionné ci-dessus par Günter.


3

Incluez simplement les bibliothèques suivantes:

import { HttpModule } from '@angular/http';
import { YourHttpTestService } from '../services/httpTestService';

et incluez la classe http dans la providerssection, comme suit:

@Component({
  selector: '...',
  templateUrl: './test.html',
  providers: [YourHttpTestService]

3

Si vous avez cette erreur dans vos tests, vous devez créer un faux service pour tous les services:

Par exemple:

import { YourService1 } from '@services/your1.service';
import { YourService2 } from '@services/your2.service';

class FakeYour1Service {
 public getSomeData():any { return null; }
}

class FakeYour2Service {
  public getSomeData():any { return null; }
}

Et avant chacun:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    providers: [
      Your1Service,
      Your2Service,
      { provide: Your1Service, useClass: FakeYour1Service },
      { provide: Your2Service, useClass: FakeYour2Service }
    ]
  }).compileComponents();  // compile template and css
}));

3
**

Soultion simple: importez HttpModule et HttpClientModule sur votre app.module.ts

**

import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';



@NgModule({
 declarations: [
   AppComponent, videoComponent, tagDirective, 
 ],
 imports: [
  BrowserModule, routing, HttpClientModule, HttpModule

],
providers: [ApiServices],
bootstrap: [AppComponent]
})
export class AppModule { }

Cette solution fonctionne, mais HttpModule est marqué comme obsolète dans Angular 5.2. Je pense que certains composants ne sont pas mis à niveau et utilisent toujours l'ancienne implémentation Http.
Sobvan

1

Tout ce que vous devez faire est d'inclure les bibliothèques suivantes dans tour app.module.ts et également de les inclure dans vos importations:

import { HttpModule } from '@angular/http';

@NgModule({
  imports:    [ HttpModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

1

J'ai rencontré ce problème dans mon code. J'ai seulement mis ce code dans mon app.module.ts.

import { HttpModule } from '@angular/http';

@NgModule({
  imports:      [ BrowserModule, HttpModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

1
Veuillez ne pas répéter les réponses existantes. Cela n'ajoute pas de valeur à la communauté.
isherwood

1

import { HttpModule } from '@angular/http'; package dans votre fichier module.ts et ajoutez-le dans vos importations.


1

Je viens d'ajouter ces deux dans mon app.module.ts:

"import { HttpClientModule }    from '@angular/common/http'; 

&

import { HttpModule } from '@angular/http';"

Maintenant, ça marche bien .... Et n'oubliez pas d'ajouter le

@NgModule => Imports:[] array

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.