Visual Studio 2015: angular 2 @component kann die Signatur des Klassen-Dekorators nicht auflösen

Question

Neu bei angular2/typescript und ich bin gerade dabei, mich zu verwirren, also habe ich mich gefragt, ob mir jemand helfen kann.

Ich benutze Visual Studio 2015 und wie Sie sehen können, versuche ich, meinen Dekorateur zu meiner Klasse zu definieren. Allerdings, wenn ich getroffen bauen ich den Fehler bekommen ..

Körperbau: Unable Signatur der Klasse Dekorateur zu lösen, wenn als Ausdruck

import { Component } from "angular2/core"; 
import { Http, HTTP_PROVIDERS } from "angular2/http"; 
import "rxjs/Rx"; 
import { ROUTER_PROVIDERS } from "angular2/router"; // RouteConfig 

import { SearchService } from './search/search.service'; 
import { SearchComponent } from './search/search.component'; 
import { SiteComponent } from './site/site.component'; 

@Component({ 
    selector: 'my-app', 
    template: '<div>testing</div>', 
    directives: [], 
    providers: [SearchService, HTTP_PROVIDERS, ROUTER_PROVIDERS] 
}) 
export class AppComponent { 
    pageTitle: string = "My App" 
} 

Die typescripttoolsversion wird auf 1,8 in mycsproj-Datei bezeichnet. Ich verwende npm, um meine Abhängigkeiten zu installieren.

"dependencies": { 
    "angular2": "2.0.0-beta.15", 
    "systemjs": "0.19.26", 
    "es6-shim": "^0.35.0", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.2", 
    "zone.js": "0.6.10", 
    "bootstrap": "^3.3.6" 
}, 
"devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.2.0", 
    "typescript": "^1.8.10", 
    "typings": "^0.7.12" 
} 

Was mache ich hier falsch? Gibt es noch weitere Informationen, die ich geben kann?

Answer 1

Es wird dringend empfohlen, dass Sie auf die neueste Version von Angular 2 aktualisieren, die derzeit auf Release 4 läuft. Dies sollte helfen, da die neueste Version offizielle Handbücher für Visual Studio enthält. Sie können dies tun, indem Sie Ihre package.json aktualisieren. Stellen Sie sicher, dass Sie die zusätzlichen Konfigurationsdateien aus der Schnellstartanleitung (Link unten) einbinden. Sie müssen auch Ihren Systemjs-Loader und HTML aktualisieren, um den aktualisierten eckigen Namen wiederzugeben. Es gibt auch ein zusätzliches Tutorial Angular 2 in Visual Studio 2015.

{ 
    "name": "angular2-quickstart", 
    "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": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/forms": "0.2.0", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angular/router": "3.0.0-beta.1", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "@angular/upgrade": "2.0.0-rc.4", 

    "systemjs": "0.19.27", 
    "core-js": "^2.4.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "zone.js": "^0.6.12", 

    "angular2-in-memory-web-api": "0.0.14", 
    "bootstrap": "^3.3.6" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.2.0", 
    "typescript": "^1.8.10", 
    "typings":"^1.0.4" 
    } 
} 

HTML für die Konfiguration:

import { Component } from '@angular/core';

Quelle: https://angular.io/guide/quickstart

Visual Studio 2015 Quickstart: https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html