Angular2 Finale: „Kein Anbieter für ConnectionBackend“ auch „kann alle Parameter für nicht lösen ...“

Question

nach abschließenden (2.0.0) bekommen diese Fehler NG2 Upgrade:

MyComponent_Host - inline template:0:0 caused by: No provider for ConnectionBackend!

aktuelle Lösungen here und here empfehlen, HTTP_PROVIDERS in bootstrap() zu übergeben, was in der endgültigen Version veraltet erscheint.

ich Httpmodule wie dies in Hauptmodul am 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 { ProductListComponent } from './productlist.component'; 
@NgModule({ 
    imports: [BrowserModule 
      , AgGridModule.forRoot() 
      , HttpModule 
    ], 
    declarations: [ProductListComponent], 
    bootstrap: [ProductListComponent] 
}) 
export class ProductModule { } 

meine Bootstrap sieht wie folgt aus:

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

Dienst, wo ich den Http-Service am raubend; product.service.ts:

import { Injectable } from '@angular/core'; 
import { Http, Response, URLSearchParams } from '@angular/http'; 

@Injectable() 
export class ProductService { 
    constructor (private http: Http){} 

her 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" 
    } 
} 

Aktualisierung/Auflösung

sieht aus wie das Problem ist, veralteter Code wahrscheinlich wegen TypScript-Compiler (tsc) nicht funktioniert p Roperly. Ich sehe immer wieder alte Fehler, selbst wenn ich große Änderungen vorgenommen habe (d. H. Die App auf ein neues Modul ausgerichtet habe, aber ich sehe weiterhin Fehler vom alten Modul). Auch wenn ich die .js Dateien manuell lösche, sehe ich sie nicht neu kompiliert und muss durch Reifen springen, um sie zurückzubekommen. Noch hier den besten Ansatz Ausarbeiten ...

...

nicht sicher, ob meine Version, wenn verflucht, aber immer bis zur endgültigen Version seit dem Upgrade i mit seltsamen Fragen bombardiert werde. Im Moment stecke ich im Fegefeuer fest, wo ich keinen einfachen Dienst abliefern kann.

"Can't resolve all parameters for MyComponent".

Ich habe eine DummyService ohne Abhängigkeiten von seinem eigenen, und ich folgte jedes Beispiel, das ich finden konnte. mit Konstruktor Injektor und definiert meinen Dienst in Component-Provider-Array, auch versucht, es in Modul-Provider hinzufügen. Ich habe die neueste Version des Tour of Heros-Beispiels heruntergeladen und in dieser Demo dasselbe wie HeroService gemacht. Einen Tag so weit verloren. Seltsamerweise hatte ich keine dieser Probleme 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 {...} 

ich eine Plunker erstellt und Injektion bearbeitet zuerst versuchen, .. so etwas anderes über mein Setup ?!

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

ich habe jetzt kopieren/jede einzelne Datei aus Plunker in meine lokale Version eingefügt und sehen immer noch den Fehler. Wenn ich den Konstruktor auskommentiere, verschwindet der Fehler.

Answer 1

Geheimnis gelöst.

der erste Teil meines Problems schien durch veraltete Typoskript Kompilierung verursacht wurden. Ich musste manuell alle Js-Dateien entfernen und sie neu erstellt bekommen, auch dachte, es erschien Echtzeit neu zu erzeugen, da die App war erfrischend (möglicherweise etwas falsch mit TS config). Nach der Aktualisierung auf Typescript 2.0.3 scheint es alle wichtigen Änderungen in Echtzeit ohne Probleme zu berücksichtigen.

Sekunden Problem: "Es können nicht alle Parameter lösen für ...".

nach ziemlich viel Schmerz es stellte sich heraus, dass meine TSconfig diese Eigenschaft fehlt:

"emitDecoratorMetadata": true, 

es Typoskript sagt Dekorateure drehen (@ ...) in tatsächliche Code JS. Setzen Sie es auf false hat die gleiche Wirkung hat alle Dekoratoren

Dies ist nicht offensichtlich, wenn Sie neu in angular2 sind und es gibt keine Erwähnung davon in Quick Start (obwohl die Eigenschaft jetzt in Schritt 1 enthalten und aktiviert ist) oder Tutorials/Services auf angular.io, also war es wirklich schwer zu finden. Ehrlich gesagt immer noch nicht sicher, warum es zu falsch ist, wenn es von den Diensten benötigt wird.

meine ganze tsconfig.json:

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

im Auge zu behalten, dass die häufigste Ursache für diesen Fehler wird wahrscheinlich sein, dass Sie wahrscheinlich nicht notwendig Anbieter in Ihrer Moduldefinition registriert haben.

wollen Sie sicherstellen, dass Ihre @ngModule alle Dienste in Anbieter Abschnitt umfasst, und alle zugehörigen Module in Importe Abschnitt.

zum Beispiel hier ist das, was meine Moduldefinition wie

sieht

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