角度例外：没有 Http 提供者

Posted 2023-02-23

【中文标题】角度例外：没有 Http 提供者

【英文标题】：Angular EXCEPTION: No provider for Http

【发布时间】：2016-02-16 17:15:15

【问题描述】：

我在我的 Angular 应用程序中获得了 EXCEPTION: No provider for Http!。我做错了什么？

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'
                )
            );

【问题讨论】：

你不见了HTTP_PROVIDERS。

import/export... 请问各位，这是什么语法？

是打字稿语法

导入/导出 - 这是 javascript 语法 (ES6)

如果其中一个答案能够真正解释为什么我们需要导入HttpModule，以及它的作用，那就太好了。

【参考方案1】：

导入 HttpModule

import  HttpModule  from '@angular/http';

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

platformBrowserDynamic().bootstrapModule(AppModule);

理想情况下，您可以将此代码拆分为两个单独的文件。 欲了解更多信息，请阅读：

https://v2.angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html https://v2.angular.io/docs/ts/latest/guide/ngmodule.html

【讨论】：

在当前的 Angular2 测试版中，该文件被称为 app.ts。

在angular-cli生成的项目中，文件名为main.ts。

如果我没有 NgModule 怎么办？我正在开发一个 angular2 模块，它没有 NgModule 但对于测试我需要 Http 提供程序

@Webruster 我刚刚检查过。它应该仍然有效。你能给我确切的错误代码吗？

@PhilipMiglinci ...感谢您提供宝贵的答案..为寻求者添加一些要点，即文件将是 app.module.ts 在角度 2.0 中的解释这是项目的核心文件，以包含将使用进一步继承的类的模块。

【参考方案2】：

>= Angular 4.3

为介绍HttpClientModule

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

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

Angular2 >= RC.5

将HttpModule 导入到您使用它的模块（此处例如AppModule：

import  HttpModule  from '@angular/http';

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

导入HttpModule 与在以前的版本中添加HTTP_PROVIDERS 非常相似。

【参考方案3】：

在 2016 年 9 月 14 日发布的 Angular 2.0.0 中，您仍在使用 HttpModule。您的主要app.module.ts 看起来像这样：

import  HttpModule  from '@angular/http';

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

然后在您的app.ts 中，您可以这样引导：

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

platformBrowserDynamic().bootstrapModule(AppModule);

【参考方案4】：

在使用之前将 HttpModule 添加到 app.module.ts 文件中的导入数组中。

import  HttpModule  from '@angular/http';

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

【参考方案5】：

由于 rc.5 你必须做类似的事情

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

platformBrowserDynamic().bootstrapModule(AppModule);

【参考方案6】：

因为只是在评论部分我重复了 Eric 的回答：

我必须包含HTTP_PROVIDERS

【讨论】：

... 另外，HTTP_PROVIDERS 已被贬值。它现在被称为 HttpModule.. ***.com/questions/38903607/…

【参考方案7】：

在您的 app.module.ts 文件中导入 HttpModule。

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

还记得在 import 下声明 HttpModule，如下所示：

imports: [
    BrowserModule,
    HttpModule
  ],

【参考方案8】：

最好的方法是通过在 providers 数组中添加 Http 来更改组件的装饰器，如下所示。

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

【讨论】：

谁标错了，请问是什么原因？

我没有投反对票，但原因可能是您不希望每个组件都有一个新的 Http 对象。最好有一个应用程序，这是通过在NgModule 级别导入它来完成的。

【参考方案9】：

从 RC5 开始，您需要像这样导入 HttpModule：

import  HttpModule  from '@angular/http';

然后将 HttpModule 包含在 Günter 上面提到的导入数组中。

【参考方案10】：

只需包含以下库：

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

并在providers部分包含http类，如下：

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

【参考方案11】：

如果您在测试中遇到此错误，您应该为所有服务创建 Fake Service：

例如：

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; 

并且在每个之前：

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

【参考方案12】：

**

简单的解决方案：在您的 app.module.ts

上导入 HttpModule 和 HttpClientModule

**

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  

【讨论】：

此解决方案有效，但 HttpModule 在 Angular 5.2 中被标记为已弃用。我认为有些组件没有升级，仍然使用旧的 Http 实现。

【参考方案13】：

您需要做的就是在游览 app.module.ts 中包含以下库，并将其包含在您的导入中：

import  HttpModule  from '@angular/http';

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

【参考方案14】：

我在代码中遇到了这个问题。我只把这段代码放在我的 app.module.ts 中。

import  HttpModule  from '@angular/http';

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

【讨论】：

请不要重复已有的答案。这样做不会为社区增加价值。

【参考方案15】：

import HttpModule from '@angular/http'; 打包到你的 module.ts 文件中，并将它添加到你的导入中。

【参考方案16】：

我只是将这两个都添加到我的 app.module.ts 中：

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

&

import  HttpModule  from '@angular/http';"

现在它工作正常.... 并且不要忘记添加

@NgModule => Imports:[] array