Angular2 error: Error in ./AppComponent class AppComponent_Host – inline template:0:0 caused by: No provider for Http!

If you’re seeing this error when you run your application it’s probably because you’re trying to use http.get without importing the HttpModule.

This is what the error looks like on the browser console:

core.umd.js:5995 EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for Http!ErrorHandler.handleError @ core.umd.js:5995(anonymous function) @ core.umd.js:9394ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:8772ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:8763ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
core.umd.js:5997 ORIGINAL EXCEPTION: No provider for Http!ErrorHandler.handleError @ core.umd.js:5997(anonymous function) @ core.umd.js:9394ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:8772ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:8763ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
core.umd.js:6000 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:6000(anonymous function) @ core.umd.js:9394ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:8772ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:8763ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
core.umd.js:6001 Error: No provider for Http!
    at NoProviderError.Error (native)
    at NoProviderError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1456:38)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1940:20)
    at new NoProviderError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1971:20)
    at ReflectiveInjector_._throwOrNull (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3573:23)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3601:29)
    at ReflectiveInjector_._getByKey (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3564:29)
    at ReflectiveInjector_.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3373:25)
    at NgModuleInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9756:56)
    at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent_Host.ngfactory.js:16:70)ErrorHandler.handleError @ core.umd.js:6001(anonymous function) @ core.umd.js:9394ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:8772ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:8763ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
core.umd.js:6004 ERROR CONTEXT:ErrorHandler.handleError @ core.umd.js:6004(anonymous function) @ core.umd.js:9394ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:8772ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:8763ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
core.umd.js:6005 DebugContext {_view: _View_AppComponent_Host0, _nodeIndex: 0, _tplRow: 0, _tplCol: 0}ErrorHandler.handleError @ core.umd.js:6005(anonymous function) @ core.umd.js:9394ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:8772ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:8763ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
zone.js:484 Unhandled Promise rejection: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for Http! ; Zone: <root> ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider …, originalError: NoProviderError, context: DebugContext} Error: No provider for Http!
    at NoProviderError.Error (native)
    at NoProviderError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1456:38)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1940:20)
    at new NoProviderError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1971:20)
    at ReflectiveInjector_._throwOrNull (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3573:23)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3601:29)
    at ReflectiveInjector_._getByKey (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3564:29)
    at ReflectiveInjector_.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3373:25)
    at NgModuleInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9756:56)
    at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent_Host.ngfactory.js:16:70)consoleError @ zone.js:484_loop_1 @ zone.js:511drainMicroTaskQueue @ zone.js:515ZoneTask.invoke @ zone.js:437
zone.js:486 Error: Uncaught (in promise): Error: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for Http!()

The solution is simple, just open your app.module.ts and add the HttpModule to the imports:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule }      from '@angular/http';
import { AppComponent }   from './app.component';
import { FormsModule }   from '@angular/forms';
 
@NgModule({
  imports:      [ BrowserModule, HttpModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

3 comments on “Angular2 error: Error in ./AppComponent class AppComponent_Host – inline template:0:0 caused by: No provider for Http!

  1. Alexander

    hi Leonardo
    My code in the app.module .ts looks the same as yours but it still gives me the same error like so.

    Error: Uncaught (in promise): Error: Error in http://localhost:3000/app/app.component.js class AppComponent_Host - inline template:0:0 caused by: No provider for ConnectionBackend!
    Error: Error in http://localhost:3000/app/app.component.js class AppComponent_Host - inline template:0:0 caused by: No provider for ConnectionBackend!
       at DebugAppView.prototype._rethrowWithContext (eval code:9427:21)
       at DebugAppView.prototype.injectorGet (eval code:9383:17)
       at ElementInjector.prototype.get (eval code:9089:17)
       at ElementInjector.prototype.get (eval code:9092:17)
       at ReflectiveInjector_.prototype._getByKeyDefault (eval code:2931:17)
       at ReflectiveInjector_.prototype._getByKey (eval code:2897:17)
       at ReflectiveInjector_.prototype.get (eval code:2706:13)
       at _View_CorpIdsComponent_Host0.prototype.createInternal (Function code:14:3)
       at AppView.prototype.create (eval code:9170:13)
       at DebugAppView.prototype.create (eval code:9370:17)
       at resolvePromise (http://localhost:3000/node_modules/zone.j

    It basically happens in my .ts file when I try to import a service that uses a .json file as input. Here is the code.
    The code that uses the service:

    import { Component, OnInit } from '@angular/core';
    import { CorpIdService } from './corpId.service';
    //import { ROUTER_DIRECTIVES } from '@angular/router';
    import { Router, ActivatedRoute } from '@angular/router';
    import { ICorpId } from './corpId';
    //import {SELECT_DIRECTIVES} from 'select/select';
     
     
     
    @Component({
        selector: 'nmlite-app',
        templateUrl: 'app/nmlite/components/corpIds.component.html'
        //directives: [ROUTER_DIRECTIVES]
     
    })
    export class CorpIdsComponent implements OnInit {
        public pageTitle: string = "Corp Id List";
        public planId: string;
        public planDesc: string;
        public planStatus: string;
        public tpNum: string;
        public setId: string;
        public corpId: string;
        public numType: string;
        public planType: string;
        public confermation: string;
        public implName: string;
     
     
        corpIds: ICorpId[] = []; 
     
        errorMessage: string;
        constructor(//private _routeParams:RouteParams,
                    private _router: Router,
                    private activatedRoute: ActivatedRoute,
                    private _corpIdService: CorpIdService
                    ) {
            /*let planId = +this._routeParams.get('planId');
            let planDesc = this._routeParams.get('planDesc');
            let planStatus = this._routeParams.get('planStatus');
            let tpNum = +this._routeParams.get('tpNum');
            let setId = this._routeParams.get('setId');
            let corpId = this._routeParams.get('corpId');
            let implName = this._routeParams.get('implName');
            this.planId =  `${planId}`;
            this.planDesc = `${planDesc}`; 
            this.planStatus = `${planStatus}`; 
            this.tpNum = `${tpNum}`;
            this.setId = `${setId}`;
            this.corpId = `${corpId}`;
            this.implName = `${implName}`; */           
        }
     
        ngOnInit(): void {
        console.log("Inside the ngOnInit function of corpIds.component.ts")
            /*this._corpIdService.getCorpIds()
            .subscribe(
                corpIds =&gt; this.corpIds = corpIds,
                error =&gt; this.errorMessage = error);
                console.log("Inside Inside the ngOnInit2 ");*/
        } 
     
        DoSelect(corpId: ICorpId): void 
        {  
            //this._router.navigate(['ImplementSet/set number', {corpId: '123456789', setId: '123', implName: 'this.implName'}]); 
            //this._router.navigate(['ImplementSet', {corpId: corpId.CustomerId, setId: this.setId, implName: this.implName}]); 
            console.log("Inside DoSelect ");
        } 
    }

    the service it self:

    import { Injectable } from '@angular/core';
    import { ICorpId } from './corpId';
    import { Http, Response } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
     
     
    import 'rxjs/add/operator/map';
     
    @Injectable()
    export class CorpIdService {
        //private _productUrl = 'www.myWebService.com/api/corpData'; // A real server and service
        //private _corpIdUrl = 'api/products/corpData.json';
        private _corpIdUrl = 'products/corpData.json';
        //private _corpIdUrl = 'http://localhost:50373/api/values';
        constructor(private _http: Http) { }
     
        getCorpIds(): Observable {
           return this._http.get(this._corpIdUrl)
                .map((response: Response) =&gt;  response.json());
                //.do(data =&gt; console.log('All CorpIs: ' +  JSON.stringify(data)))
                //.catch(this.handleError);
                            //return null; 
        }   
     
        private handleError(error: Response) {
            // in a real world app, we may send the server to some remote logging infrastructure
            // instead of just logging it to the console
            console.error(error);
            return Observable.throw(error.json().error || 'Server error');
        }
    }

    the .json file

    {
        "CustomerId": 9931234111,
        "Description": "A rather large bank",
        "LineOfBusiness": "Banking",
        "UserId": "Alex" 
    }

    Any help would most appreciated
    Alexander

Leave a Reply to Alexander Cancel reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>