angularjs 2.0：コンポーネントコンストラクタで何も挿入できません（）

Question

私はangularjs 2.0でサンプルアプリケーションを作成しています。開発中に私は深刻な問題を抱えていました - 私はコンストラクタ関数を通してコンポーネントに何も注入することはできません。

これはplnkrのURLです：https://plnkr.co/edit/g1UcGmYPLtY8GiXuNHzK?p=preview

私はその後、私は

@Component({ 
    selector: 'list-todo', 
    template: ` 
    <ul> 
    <li *ngFor="let item of items">{{item.text}}</li> 
    </ul> 
    `, 
    providers : [ItemService] 
}) 

としてプロバイダを指定app.item.service.ts

import { ItemService } from './app.item.service'; 

からItemServiceをインポートするために、次のコードを使用その後、TodoComponentのコードとして

export class TodoComponent implements OnInit { 
    items:Array<Object> = []; 
    constructor(private itemService: ItemService){ //here is the problem 
    } 

    ngOnInit(){ 
    this.getItems(); 
    } 
    getItems(){ 
    this.items = this.itemService.getItems(); 
    } 
} 

コンストラクタを使用してItemServiceを挿入しようとすると、「エラー：TodoComponentのすべてのパラメータを解決できません：（？）」というエラーが表示されます。 私はInjectorのようなangularjsの提供者さえも注入できません。

しかし、この方法では、私の作品：2.0：

const injector = ReflectiveInjector.resolveAndCreate([ItemService]); 
this.itemService = injector.get(ItemService); 

私のpackage.jsonで述べたように、私は

"dependencies": { 
    "@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" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.2.0", 
    "lite-server": "^2.2.2", 
    "typescript": "^2.0.2", 
    "typings":"^1.3.2" 
    } 

• アンギュラバージョンを開発効率向上のためのライブラリの以下のバージョンを使用しています。 0最終
• ブラウザ：すべて

私は、コンソールからもらったエラーログ取り付け

：

(index):16 Error: Error: Can't resolve all parameters for TodoComponent: (?). 
     at CompileMetadataResolver.getDependenciesMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14404:21) 
     at CompileMetadataResolver.getTypeMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14301:28) 
     at CompileMetadataResolver.getDirectiveMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14074:30) 
     at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14167:51) 
     at Array.forEach (native) 
     at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14161:51) 
     at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16803:49) 
     at RuntimeCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16741:39) 
     at RuntimeCompiler.compileModuleAsync (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16732:23) 
     at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6954:29) 
    Evaluating http://localhost:3000/dist/main.js 
    Error loading http://localhost:3000/dist/main.js(anonymous function) @ (index):16ZoneDelegate.invoke @ zone.js:203Zone.run @ zone.js:96(anonymous function) @ zone.js:462ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136drainMicroTaskQueue @ zone.js:368ZoneTask.invoke @ zone.js:308 

Answer 1

私はあなたのtsconfig.jsonが正しくないことがわかります。

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": false, 
    "emitDecoratorMetadata": true, <== it should be true 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "dist" 
    } 
} 

これはDI用の魔法のソースです。 emitDecoratorMetadata：true。このオプションは、オブジェクトのメタデータの型情報を保持します。

はあなた `tsconfig.json`を投稿できる

• How does the TypeScript Angular DI magic work?
• Injecting services in services in Angular 2

Answer 2

あなたのコードは大丈夫です！ここで

は、あなたの更新plunkerです：https://plnkr.co/edit/6SR8Ibljuy0ElEBU87ox?p=preview

はあなたのsystem.js.configにいくつかの変更をしました！

// ADDED THESE TWO OPTIONS BELOW 

    //use typescript for compilation 
    transpiler: 'typescript', 
    //typescript compiler options 
    typescriptOptions: { 
     emitDecoratorMetadata: true 
    }, 

この..

app: { 
    main: './main.ts',  // CHANGES HERE 
    defaultExtension: 'ts' // CHANGES HERE 
},