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

问题描述 投票：4回答：1

升级到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中没有这些问题。

产品组件

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中的每个文件复制/粘贴到我的本地版本中，但仍然看到错误。当我注释掉构造函数时，错误消失了。

angular typescript typescript2.0
1个回答
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包含提供程序部分中的所有服务以及导入部分中的所有相关模块。

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

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 { }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.