Angular 4 - using HttpModule I get the error “No provider for ConnectionBackend!”

Question

I'm new to Angular4 (and TypeScript) and I've been getting this error:

My app.module.ts is setup like this:

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

import { AppComponent }  from './app.component';
import { CustomerListComponent }  from './Customer-List/customer-list.component';
import { CustomerDetailsComponent }  from './Customer-Details/customer-details.component';
import { DataService } from './services/data.service';


@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpModule ],
  declarations: [ AppComponent, CustomerListComponent, CustomerDetailsComponent ],
  providers: [ DataService ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

I have a service (called DataService) that uses the Http module in the following code:

    import { Injectable } from '@angular/core';
    import { Http, Response, RequestOptions, Headers } from '@angular/http';
    import { CreateTestCustomers } from '../data/test-data';
    import { Customer } from '../Models/customerModel';

    @Injectable()
    export class DataService {

        private customersUrl = 'http://localhost:52740/api/Customers/';

        constructor(
            private http : Http
        ) { }

        getCustomersP() : Promise<Customer[]>{
                const customers = CreateTestCustomers();

                return this.http.get(this.customersUrl)
                    .toPromise()
                    .then(response => {
                        const custs = response.json().data as Customer[];
                        return custs;
                    }, error => {
                        return Promise.reject('Something bad happened, please check the console');
                    },);
            }
    }

When I try to compile my app, I get this strange error:

Unhandled Promise rejection: No provider for ConnectionBackend! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for ConnectionBackend! Error: No provider for ConnectionBackend!
   at ReflectiveInjector_.prototype._throwOrNull (eval code:2681:13)
   at ReflectiveInjector_.prototype._getByKeyDefault (eval code:2720:13)
   at ReflectiveInjector_.prototype._getByKey (eval code:2652:13)
   at ReflectiveInjector_.prototype.get (eval code:2521:9)
   at resolveNgModuleDep (eval code:9513:5)
   at _createClass (eval code:9555:13)
   at _createProviderInstance$1 (eval code:9524:13)
   at resolveNgModuleDep (eval code:9508:13)
   at _createClass (eval code:9555:13)
   at _createProviderInstance$1 (eval code:9524:13)
zone.js (661,17)
   "Unhandled Promise rejection:"
   "No provider for ConnectionBackend!"
   "; Zone:"
   "<root>"
   "; Task:"
   "Promise.then"
   "; Value:"
   {
      [functions]: ,
      __proto__: { },
      __zone_symbol__currentTask: { },
      description: "No provider for ConnectionBackend!",
      injectors: [ ],
      keys: [ ],
      message: "No provider for ConnectionBackend!",
      name: "Error",
      ngDebugContext: { },
      ngOriginalError: undefined,
      stack: "Error: No provider for ConnectionBackend!
   at ReflectiveInjector_.prototype._throwOrNull (eval code:2681:13)
   at ReflectiveInjector_.prototype._getByKeyDefault (eval code:2720:13)
   at ReflectiveInjector_.prototype._getByKey (eval code:2652:13)
   at ReflectiveInjector_.prototype.get (eval code:2521:9)
   at resolveNgModuleDep (eval code:9513:5)
   at _createClass (eval code:9555:13)
   at _createProviderInstance$1 (eval code:9524:13)
   at resolveNgModuleDep (eval code:9508:13)
   at _createClass (eval code:9555:13)
   at _createProviderInstance$1 (eval code:9524:13)"
   }
   "Error: No provider for ConnectionBackend!
   at ReflectiveInjector_.prototype._throwOrNull (eval code:2681:13)
   at ReflectiveInjector_.prototype._getByKeyDefault (eval code:2720:13)
   at ReflectiveInjector_.prototype._getByKey (eval code:2652:13)
   at ReflectiveInjector_.prototype.get (eval code:2521:9)
   at resolveNgModuleDep (eval code:9513:5)
   at _createClass (eval code:9555:13)
   at _createProviderInstance$1 (eval code:9524:13)
   at resolveNgModuleDep (eval code:9508:13)
   at _createClass (eval code:9555:13)
   at _createProviderInstance$1 (eval code:9524:13)"

Has anyone come across this before? Everything online seems to refer to Angular 2, and none of the fixes for it seem to help with angular 4.

I've seen this article but its unanswered - my problem looks similar: angular 4 Error: Uncaught (in promise): Error: No provider for ConnectionBackend! while injecting Jsonp

Thanks in advance!

Answer 1

Not so much as an answer, but a workaround. I scaffolded up a new project and added my components back in one by one to work around this issue. Not sure what happened with the original project.