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 ?
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With