Angular2 final: "No provider for ConnectionBackend" also "Can't resolve all parameters for ..."

Question

After upgrading to ng2 final (2.0.0) I am getting this error:

MyComponent_Host - inline template:0:0 caused by: No provider for ConnectionBackend!

The current solutions here and here recommend passing HTTP_PROVIDERS in bootstrap() which seems deprecated in final version.

I am importing HttpModule in main module like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-ng2/main';
import { HttpModule } from '@angular/http';

import { ProductListComponent } from './productlist.component';
@NgModule({
    imports: [BrowserModule
            , AgGridModule.forRoot()
            , HttpModule
    ],
    declarations: [ProductListComponent],
    bootstrap: [ProductListComponent]
})
export class ProductModule { }

My bootstrap looks like this:

import { platformBrowserDynamic  }    from '@angular/platform-browser-dynamic';
import { ProductModule } from './product/product.module';
import { ProductService } from './product/product.service';
import {AgGridNg2} from 'ag-grid-ng2/main';

const platform = platformBrowserDynamic();
platform.bootstrapModule(ProductModule);

Service where I am consuming the Http service; product.service.ts:

import { Injectable } from '@angular/core';
import { Http, Response, URLSearchParams } from '@angular/http';

@Injectable()
export class ProductService {
    constructor (private http: Http){}

productlist.component.ts

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { ProductService } from './product.service';
import { Http, HttpModule } from '@angular/http';
import { AgGridNg2 } from 'ag-grid-ng2/main';
import { GridOptions } from 'ag-grid/main';

@Component({
    selector: 'product-list',
    templateUrl: './app/product/productlist.html',
})

export class ProductListComponent implements OnInit {
    Products: Array<any>;
    searchTerm = new FormControl();
    constructor(private svc: ProductService) {...}

package.json

{
  "name": "productv2",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "ag-grid": "~6.0.1",
    "ag-grid-enterprise": "~6.0.1",
    "ag-grid-ng2": "~6.0.4",

    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6",

    "ag-grid": "6.0.x",
    "ag-grid-ng2": "6.0.x",
    "jquery": "3.1.0"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.2",
    "typings":"^1.3.2"
  }
}

update/resolution

Looks like the issue is stale code likely due to TypeScript compiler (tsc) not working properly. I keep seeing old errors even when I made big changes (i.e. pointed the app to a new module, yet I keep seeing errors from old module). Also when I manually delete the .js files I don't see them re-compiled and have to jump through hoops to get them back. Still working out the best approach here.

...

Ever since upgrading to final version I have been bombarded with weird issues. Right now I am stuck and can't inject a simple service.

"Can't resolve all parameters for MyComponent".

I added a DummyService with no dependencies of it's own, and I followed every example I could find. using constructor injector and defined my service in Component providers array, also tried adding it in module providers. I downloaded latest version of Tour of Heros example and doing identical thing as HeroService in that demo. Lost a day so far. Strangely I had none of these problems in RC.

ProductsComponent

import { Component } from '@angular/core';
import { DummyService } from './dummy.service';
@Component({
    selector: 'products',
    templateUrl: './app/product/products.html',
    providers: [ DummyService ]
})
export class ProductsComponent {
    Products: Array<any>;
    constructor(private svc: DummyService) {}

DummyService

import { Injectable } from '@angular/core';
@Injectable()
export class DummyService {...}

I created a plunker and injection worked on first try.. so something different about my setup?!

http://plnkr.co/edit/MdMNuSVmcVqvo0Zyu4Ca?p=preview

I have now copy/pasted every single file from plunker into my local version and still seeing the error. When I comment out the constructor the error goes away.

I can't see anything in this code that would cause this error, Importing the `HttpModule` is all you need. Maybe something you're _not_ showing us? — Paul Samsotha, Sep 26 '16 at 00:33
thanks i updated with where i am consuming Http. maybe that part is outdated ? — Sonic Soul, Sep 26 '16 at 00:35
Nope. All you need is to import the `HttpModule` to be able to use `Http`, and you've done it. — Paul Samsotha, Sep 26 '16 at 00:36
I don't know... _visually_? :-D jk. I imagine it should just work. Or else there would be a bug with Angular which I highly doubt — Paul Samsotha, Sep 26 '16 at 00:41
i mean by inspecting sources etc.. like we did in the old days — Sonic Soul, Sep 26 '16 at 00:43
No that's not required. You can see the [Http docs](https://angular.io/docs/ts/latest/guide/server-communication.html) — Paul Samsotha, Sep 26 '16 at 00:49
You know, I am still unable to replicate your issue. I decided to remove my answer since it won't help future readers. — choz, Sep 27 '16 at 02:11
thank you for all your help. i will update once i figure it out but think it was some stale code .. — Sonic Soul, Sep 27 '16 at 03:41
Where are these errors coming from? unit testing/building or when you load the app in your browser. If it is in unit tests I might have a solution for you. — Dawid Zbiński, Sep 27 '16 at 22:52
just trying to run my simple app with angular 2.0.0. error is in browser — Sonic Soul, Sep 27 '16 at 23:06
@GünterZöchbauer done. i also tried w/out the providers section since that doesn't seem to be required as long as you declare the providers in Module. — Sonic Soul, Sep 28 '16 at 11:46
i see the dummyservice.js retrieved successfully in the network tab. — Sonic Soul, Sep 28 '16 at 13:37
does it need to be provided in the module, or the component, or it doesn't matter which ? — Sonic Soul, Sep 28 '16 at 13:42
updated my answer with my findings.. it was a tsconfig.json property — Sonic Soul, Sep 29 '16 at 01:07

Sonic Soul · Accepted Answer · 2017-01-19T18:08:19.277

mystery solved.

the first portion of my problem seemed to have been caused by stale Typescript compilation. I had to manually remove all the .js files and get them recreated, even thought it appeared to re-generate real time since the app was refreshing (possibly something wrong with TS config). After updating to Typescript 2.0.3 it seems to respect all major changes in real time with no issues.

second problem: "Can't resolve all parameters for ...".

after quite a bit of pain it turned out that my tsconfig was missing this property:

"emitDecoratorMetadata": true,

it tells Typescript to turn decorators (@...) into actual JS code. Setting it to false has the same effect has removing all decorators

this is not obvious if you're new to angular2 and there is no mention of it in Quick Start (although the property is now included and enabled in step 1) or Tutorials/Services on angular.io so it was a real pain to find. Frankly still not sure why it is defaulted to false if it's required by services.

my entire tsconfig.json:

{
   "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "inlineSourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

keep in mind that the most common cause of this error will most likely be that you probably did not register necessary providers in your module definition.

you want to make sure that your @ngModule includes all services in providers section, and all related modules in imports section.

for example here is what my module definition looks like

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-ng2/main';
import { HttpModule } from '@angular/http';
import { FormsModule }   from '@angular/forms';
import { routing, appRoutingProviders }  from './app.routing';
// components
import { AppComponent } from './app.component';
import { ClassesComponent } from './product/classes.component';
import { SeriesComponent } from './product/series.component';
import { ProductsComponent } from './product/products.component';
import { ProductDetailComponent } from './product/productdetail.component';
import { HeaderComponent } from './header/header.component';
import { PageNotFoundComponent } from './pagenotfound.component'
import { CacheComponent } from './common/cache.component';
import { ClassDetailComponent } from './product/classdetail.component';
import { EtpFilterCheckboxComponent } from './common/filter.components';
import { BreadcrumbComponent } from './common/breadcrumb.component';
// services
import { ProductService } from './product/product.service';
import { GridSerivce } from './common/grid.service';
import { AppConfigService } from './app.config.service';
import { NotifyService } from './common/notify.service';
import { FormattingService } from './common/formatting.service';

@NgModule({
    imports: [
              BrowserModule
            , FormsModule
            , HttpModule
            , AgGridModule.forRoot()
            , routing
    ],
    providers: [
              AppConfigService
            , ProductService
            , NotifyService
            , appRoutingProviders
            , GridSerivce
            , FormattingService
            ],
    declarations: [
        AppComponent
      , BreadcrumbComponent
      , ProductsComponent
      , ClassesComponent
      , SeriesComponent
      , HeaderComponent
      , ProductDetailComponent
      , PageNotFoundComponent
      , CacheComponent
      , ClassDetailComponent
      , EtpFilterCheckboxComponent
    ],
    bootstrap: [AppComponent, HeaderComponent]
})
export class ProductModule { }

I am having this problem too, but your suggestion does not apply to me. Can you please your tsconfig file just to check that I haven't missed anything? I started getting this error when I upgraded from angular-cli from beta19 to beta25 and from angular2.1.0 to 2.4.3 — Radu Cojocari, Jan 19 '17 at 10:48
Managed to fix the problem after a lot of pain. The project is using barels to export references. It turns out that someone exported the services twice in the same folder. After removing this, the world started making sense once more. — Radu Cojocari, Jan 20 '17 at 10:44

Angular2 final: "No provider for ConnectionBackend" also "Can't resolve all parameters for ..."

1 Answers1