Sonic Soul Sonic Soul - 1 year ago 547
TypeScript Question

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

after upgrading to ng2 final (2.0.0) getting this error:

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

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';
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();

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

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

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

heres 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';

selector: 'product-list',
templateUrl: './app/product/productlist.html',

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


"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",


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...


not sure if my version if cursed but ever since upgrading to final version i am bombarded with weird issues. right now i am stuck in purgatory where I 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.


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


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

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

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.

Answer Source

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 so it was a real pain to find. Frankly still not sure why it is defaulted to false if it's required by services.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download