Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

No provider for Http

I have issue with injecting HTTP into Angular 2 application. Few days ago it was working fine but now I have error:

ORIGINAL EXCEPTION: No provider for Http!

There is main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { LoginModule } from "./login/login.module";
import { Http } from "@angular/http";


platformBrowserDynamic().bootstrapModule(LoginModule);

Login module.ts

@NgModule({
    imports: [BrowserModule, FormsModule], // external modules for all components
    declarations: [LoginComponent], // component which belong to this module
    bootstrap: [LoginComponent] // component on load
})
export class LoginModule {
}

And finally LoginComponent in LoginModule

import { Component } from '@angular/core';
import { AccountService } from "../data/account.service";
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { LocalStorage } from '../storage/storage';

@Component({
    selector: 'tp-login',
    templateUrl: `app/login/login.html`,
    styleUrls: ['app/login/login.css'],
    providers: [AccountService, LocalStorage]

})

There is exception in LoginComponent about no HttpProvider. Somone know how to solve that issue ?

like image 222
miechooy Avatar asked Jan 23 '17 11:01

miechooy


People also ask

How do I fix Nullinjectorror no provider for Httpclient?

Resolution. The issue is more due to not registering the required services i.e HttpClientModule in the root module ie. NgModule. As per Angular Design and Architecture every service (internal or external service) is required to be registered with root NgModule as required.

What is HTTP client module?

The HttpClientModule is a service module provided by Angular that allows us to perform HTTP requests and easily manipulate those requests and their responses. It is called a service module because it only instantiates services and does not export any components, directives or pipes.

What is null injector error?

in Angular on May 16, 2020. The error occurs because of missing providers in app.module.ts. The error mostly occurs when we try to change one of the services and class and forget to update the providers in the app.module.


1 Answers

Good to incapsulate all your module dependencies into main class module inside @ngModule attribute

import { BrowserModule } from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

So you can be sure that when your module will be included as child dependency - all dependecies will be resolved before.

like image 154
VadimB Avatar answered Sep 22 '22 19:09

VadimB