Angular2 RC.1注入

Question

我現在正在學習Angular2，問題是每當我找到一個好的教程（它不適合最新的Angular2版本）時，它就會改變。

無論如何 - 我試圖從一個文件注入一個服務到另一個文件，但不能重複教程中的人。

這裏的鏈接教程：https://egghead.io/lessons/angular-2-injecting-a-service

./main.ts

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {Component} from "@angular/core"; 
import {TodoInput} from './todo-input'; 
import {TodoService} from "./todo-service"; 

@Component({ 
    selector: 'my-app', 
    directives: [TodoInput], 
    template: '<div><todo-input></todo-input></div>' 
}) 

class App{} 

bootstrap(App, [TodoService]); 

./todo-service.ts

import {Injectable} from "@angular/core"; 

@Injectable() 

export class TodoService { 
    todos:string[] = []; 
} 

./todo -input.ts

import {Component} from "@angular/core"; 
import {TodoService} from "./todo-service"; 

@Component({ 
    selector: 'todo-input', 
    template: `<div> 
    I'm a todo input 
    <input type="text" #myInput> 
    <button (mouseover)="onClick($event, myInput.value)">Click me</button> 
    </div>` 
}) 

export class TodoInput{ 
    constructor(todoService:TodoService) { 
     console.log(todoService); 
    } 

    onClick(event, value) { 
     console.log(event, value); 
    } 
} 

和我有一個控制檯：

EXCEPTION: TypeError: Cannot read property 'query' of null platform-browser.umd.js:962 EXCEPTION: TypeError: Cannot read property 'query' of nullBrowserDomAdapter.logError @ platform-browser.umd.js:962BrowserDomAdapter.logGroup @ platform-browser.umd.js:972ExceptionHandler.call @ core.umd.js:3696(anonymous function) @ core.umd.js:8982ZoneDelegate.invoke @ zone.js:323NgZoneImpl.inner.inner.fork.onInvoke @ core.umd.js:6075ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356NgZoneImpl.inner.inner.fork.onInvokeTask @ core.umd.js:6066ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 platform-browser.umd.js:971EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null platform-browser.umd.js:962EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'query' of nullBrowserDomAdapter.logError @ platform-browser.umd.js:962BrowserDomAdapter.logGroup @ platform-browser.umd.js:972ExceptionHandler.call @ core.umd.js:3696(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:5996NgZone._zoneImpl.NgZoneImpl.onError @ core.umd.js:6227NgZoneImpl.inner.inner.fork.onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 platform-browser.umd.js:962STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:962ExceptionHandler.call @ core.umd.js:3698(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:5996NgZone._zoneImpl.NgZoneImpl.onError @ core.umd.js:6227NgZoneImpl.inner.inner.fork.onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 platform-browser.umd.js:962Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null at resolvePromise (zone.js:538) at PromiseCompleter.reject (zone.js:515) at eval (core.umd.js:8981) at ZoneDelegate.invoke (zone.js:323) at Object.NgZoneImpl.inner.inner.fork.onInvoke (core.umd.js:6075) at ZoneDelegate.invoke (zone.js:322) at Zone.run (zone.js:216) at zone.js:571 at ZoneDelegate.invokeTask (zone.js:356) at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (core.umd.js:6066)BrowserDomAdapter.logError @ platform-browser.umd.js:962ExceptionHandler.call @ core.umd.js:3699(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:5996NgZone._zoneImpl.NgZoneImpl.onError @ core.umd.js:6227NgZoneImpl.inner.inner.fork.onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 zone.js:461 Unhandled Promise rejection: Cannot read property 'query' of null ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'query' of null(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 zone.js:463 Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null(…)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

，但小的變化，它的開始工作：

./todo-input.ts

import {Component} from "@angular/core"; 
import {TodoService} from "./todo-service"; 

@Component({ 
    selector: 'todo-input', 
    template: `<div> 
    I'm a todo input 
    <input type="text" #myInput> 
    <button (mouseover)="onClick($event, myInput.value)">Click me</button> 
    </div>` 
}) 

export class TodoInput{ 
    constructor() { 
     console.log(TodoService); 
    } 

    onClick(event, value) { 
     console.log(event, value); 
    } 
} 

和我在控制檯中有正常的對象（沒有任何錯誤）

SystemJS配置

<script> 
    (function(global) { 
     // map tells the System loader where to look for things 
     var map = { 
      'app':      'app', // 'dist', 
      '@angular':     '@angular', 
      'angular2-in-memory-web-api': 'angular2-in-memory-web-api', 
      'rxjs':      'rxjs' 
     }; 
     // packages tells the System loader how to load when no filename and/or no extension 
     var packages = { 
      'app':      { main: 'main.js', defaultExtension: 'js' }, 
      'rxjs':      { defaultExtension: 'js' }, 
      'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
     }; 
     var ngPackageNames = [ 
      'common', 
      'compiler', 
      'core', 
      'http', 
      'platform-browser', 
      'platform-browser-dynamic', 
      'router', 
      'router-deprecated', 
      'upgrade', 
     ]; 
     // Individual files (~300 requests): 
     function packIndex(pkgName) { 
      packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
     } 
     // Bundled (~40 requests): 
     function packUmd(pkgName) { 
      packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; 
     }; 
     // Most environments should use UMD; some (Karma) need the individual index files 
     var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 
     // Add package entries for angular packages 
     ngPackageNames.forEach(setPackageConfig); 
     var config = { 
      baseURL: '{!! url('public/admin/js') !!}', 
      map: map, 
      packages: packages 
     } 
     System.config(config); 
    })(this); 

    System.import('app').catch(function(err){ console.error(err); }); 
</script> 

所以我的問題是：爲什麼，因爲它在本教程的完成我不能叫從構造函數的參數是服務？或者如何做到這一點？我錯過了什麼嗎？教程看起來非常棒，可以給我非常好的Angular2基礎知識，但是當你陷入這樣簡單的事情時，它很難學習。

非常感謝！ 湯姆

Answer 1

查看排序。隨PHPStorm一起提供的TypeScript編譯器引發了這些問題。我已經建立了我的tsconfig.json文件，並通過npm tsc運行它，它現在正在運行。

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "./public/admin/js/app" 
    }, 
    "exclude": [ 
    "node_modules", 
    "build", 
    "vendor", 
    "public" 
    ] 
} 

只是覺得我仍然不知道如何擺脫這似乎從文件夾排除未來日誌擺脫這些編譯錯誤。

乾杯！