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

Answer 1

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