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，我按照我能找到的每个例子。使用构造函数注入器并在组件提供程序数组中定义我的服务，也尝试在模块提供程序中添加它。我下载了最新版本的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 {...}

我创造了一个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包含 提供商 部分中的所有服务，以及 导入 <中的所有相关模块/ strong>部分。

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

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

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

1 个答案: