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 { }

Recommended for you

Angular2: Uncaught (in promise): Error: Cannot match any routes: ” If you're specifying the routes on your project for the first time you may see the following error on the console when you run it: core.umd.js:3462 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''ErrorHandler.handleError @ core.umd.js:3462next @ core.umd.js:6924schedulerFn @...
Angular2 Tutorial: Creating Custom Pipes Angular 2 Pipes provide us a very simple way to transform/format the data displayed by our application, there are some built-in pipes we can use, but sometimes they don't meet our needs, that's when we have to create custom pipes. This will be a very quick tutorial in which I'll give you an example ...
Angular 2 Tutorial: Adding HotKeys (Keyboard shortcuts) to a Component Arguably hotkeys can substantially increase the usability of an application, the less the users have to touch the mouse the better will be their experience with the application. Luckily for us there is a very easy way of defining hotkeys on angular2, which is by adding a listener to the host comp...
Angular2 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base e... This is a very common error for Angular2 beginners, if you are reading this it's probably because you're using the RouterModule module for the first time, you've done everything right but when you run your application you see something like this on your firebug: core.umd.js:3462 EXCEPTION: No b...

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

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>