Angular2 final: "There is no provider for ConnectionBackend" also "Unable to resolve all parameters for ..."

Question

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

MyComponent_Host - built-in template: 0: 0, called: There is no provider for ConnectionBackend!

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

I import the HttpModule into the main module as follows:

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 boot file is as follows:

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

where i use 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){}

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

@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

, - TypeScript (tsc). , (.. , - ). , .js, , . ...

...

, , , . , .

" MyComponent".

DummyService - , , . , . Tour of Heros , HeroService . . , 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 {...}

, .. - ?!

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

/ . , .

Answer 1

.

, -, Typescript. .js , , (, - TS). Typescript 2.0.3 , , - .

: " ...".

, tsconfig :

"emitDecoratorMetadata": true,

Typescript (@...) JS-. false ,

, angular2, Quick Start ( 1) Tutorials/Services angular.io , . , , , .

tsconfig.json:

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

, , , , , , .

, @ngModule import.

,

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