Visual Studio 2015：Angular 2 @Component無法解析類裝飾器的簽名

Question

如您所見，使用Visual Studio 2015，我正在嘗試在類頂部定義裝飾器。 但是當我打構建時，我得到了錯誤..

生成：作為表達式調用時，無法解析類裝飾器的簽名

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

在mycsproj文件中，typescripttoolsversion設置為1.8。 我正在使用npm安裝我的依賴項。

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

我在這里做錯了什么？ 我還能提供其他信息嗎？

Answer 1

強烈建議您升級到Angular 2的最新版本，該版本當前在候選版本4中。這應該會有所幫助，因為最新版本具有適用於Visual Studio的官方指南。 您可以通過更新package.json來實現。 確保包括快速入門指南（下面的鏈接）中的其他配置文件。 您還需要更新systemjs加載程序和HTML以反映更新的角度名稱。 還有一個額外的教程，用於在Visual Studio 2015中配置Angular 2。

{
  "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：

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

資料來源： https : //angular.io/guide/quickstart

Visual Studio 2015快速入門： https : //angular.io/docs/ts/latest/cookbook/visual-studio-2015.html