Angular2 final：“没有 ConnectionBackend 的提供者”也“无法解析...的所有参数”

Question

升级到 ng2 final (2.0.0) 后出现此错误：

MyComponent_Host - 内联模板：0:0 原因：没有 ConnectionBackend 的提供者！

当前的解决方案here 和here 建议在 bootstrap() 中传递 HTTP_PROVIDERS，这在最终版本中似乎已被弃用。

我在主模块中导入 HttpModule，如下所示：

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

我的引导程序如下所示：

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

我使用 Http 服务的服务； 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"
  }
}

更新/解决

看起来问题是由于 TypeScript 编译器 (tsc) 无法正常工作而导致的代码过时。即使我进行了重大更改（即将应用程序指向一个新模块，但我仍然看到来自旧模块的错误），我仍然会看到旧错误。此外，当我手动删除 .js 文件时，我没有看到它们重新编译，并且必须跳过箍才能将它们取回。仍在寻找最佳方法。

...

自从升级到最终版本后，我就被各种奇怪的问题轰炸了。现在我被卡住了，无法注入简单的服务。

“无法解析 MyComponent 的所有参数”。

我添加了一个不依赖于它自己的 DummyService，并且我遵循了我能找到的每个示例。使用构造函数注入器并在组件提供程序数组中定义了我的服务，还尝试将其添加到模块提供程序中。我下载了最新版本的英雄之旅示例，并在该演示中做与 HeroService 相同的事情。到现在为止都输了一天。奇怪的是，我在 RC 中没有这些问题。

产品组件

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

虚拟服务

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

我创建了一个 plunker 并且第一次尝试注入工作..所以我的设置有什么不同？！

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

我现在已将 plunker 中的每个文件复制/粘贴到我的本地版本中，但仍然看到错误。当我注释掉构造函数时，错误消失了。

Answer 1

谜团解开了。

我的问题的第一部分似乎是由过时的 Typescript 编译引起的。我不得不手动删除所有 .js 文件并重新创建它们，甚至认为它似乎在刷新应用程序后实时重新生成（可能是 TS 配置有问题）。更新到 Typescript 2.0.3 后，它似乎实时尊重所有重大更改，没有任何问题。

第二个问题：“无法解析...的所有参数”。

经过一番痛苦后，我发现我的 tsconfig 缺少这个属性：

"emitDecoratorMetadata": true,

它告诉 Typescript 将装饰器 (@...) 转换为实际的 JS 代码。将其设置为 false 与删除所有装饰器具有相同的效果

如果您是 angular2 的新手，并且在快速入门（尽管该属性现在已包含并在步骤 1 中启用）或 angular.io 上的教程/服务中没有提及它，这并不明显，所以它是真实的很难找到。坦率地说，如果服务需要它，为什么它默认为 false 仍然不确定。

我的整个 tsconfig.json：

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

请记住，此错误的最常见原因很可能是您可能没有在模块定义中注册必要的提供程序。

您要确保您的 @ngModule 包含 providers 部分中的所有服务，以及 imports 中的所有相关模块 部分。

例如，这是我的模块定义的样子

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