開始與VisualStudio的，打字稿及Angular2

我們試圖啓動與Visual Studio 2015年一個新的Angular2項目我們已經創建了一個新的打字稿項目，下面的例子合作，我們發現我們已經把以下我們index.html文件：開始與VisualStudio的，打字稿及Angular2

<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

（sidenode - 爲什麼我們需要許多具有各自的含義，爲什麼沒有他們都在一個單一的基礎文件？）

我們的角度應用程序是這樣的：

import {Component} from 'angular2/core'; 

@Component({ 
    // Declare the tag name in index.html to where the component attaches 
    selector: 'hello-world', 
    // Location of the template for this component 
    templateUrl: 'app/hello_world.html' 
}) 

export class HelloWorld { 
    // Declaring the variable for binding with initial value 
    yourName: string = ''; 
}

我們希望爲絕對型的angular2添加一個類型文件，但好像是空的（https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/angular2/angular2.d.ts）。我們還從nuget（https://www.nuget.org/packages/angular2.TypeScript.DefinitelyTyped/）安裝了它，並獲得了相同的空文件 - 可能它跟不上角度發展？

Error TS1148 Cannot compile modules unless the '--module' flag is provided. Angular2TS_Test c:\Users\Ophir_O\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts 3 Active 
Error TS2307 Cannot find module 'angular2/core'. Angular2TS_Test c:\Users\Ophir_O\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts 3 Active 
Error  Build: Argument of type '{ selector: string; templateUrl: string; }' is not assignable to parameter of type '{ selector: string; properties?: Object; hostListeners?: Object; injectables?: List<any>; lifecyc...'. Angular2TS_Test c:\users\ophir_o\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts 9 
Error  Build: Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning. Angular2TS_Test c:\users\ophir_o\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts 12 
Error TS1219 Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning. Angular2TS_Test c:\Users\Ophir_O\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts 12 Active

什麼是正確的方式來啓動與TypeScript和VisualStudio的angular2項目？我們找不到任何最新的指南...

來源

2016-01-21 developer82

您需要添加一個tsconfig.json文件，告訴TypeScript編譯器如何編譯Angular2的代碼。請參閱：https://github.com/mgechev/angular2-seed/blob/master/tsconfig.json

來源

2016-01-21 09:58:36 Wilgert

謝謝。那麼空的'd.ts'文件怎麼樣？ – developer82

此項目類型不支持'A'tsconfig.json'文件 – developer82

關於空白d.ts：Angular2在npm包中有所有類型。在「空白」文件中看到這一行。 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/cdd23d1/angular2/angular2.d.ts#L6 – Wilgert

system.js：以打字稿AngularJS取決於模塊裝載機。 SystemJS是一個通用動態模塊加載程序。
angular2-polyfills.js：用於區和支撐變化檢測需要。
RxJS：庫支持觀察序列和事件流。除非你打算使用Observables，否則你不需要這個。
Angular2.dev.js：是的，你需要這個。這是Angular2庫。
ES6-墊片：這是必要的，以確保瀏覽器的兼容性ES6不還支持全ES6標準。如果您的目標是es6語言規範（即使用es6提供的語言功能），則應該包括此內容。否則，如果你只是使用es5，這個墊片是沒有必要的。
typescript.ts：對於transpiling打字稿成JavaScript客戶端。如果您在打字稿中編寫您的Angular2組件，並且您希望在客戶端上進行轉譯，請包括此內容。另一種方法是在服務器上傳輸打字稿，在這種情況下，這是不必要的。

您的組件實現看起來不錯。

要使用VS2015整合，遵循公認的答案這些指令：

cannot find module 'angular2/core'

您的腳本應該是這樣的：

<!-- 1. Load libraries --> 
<script src="node_modules/es6-shim/es6-shim.js"></script> 
<script src="node_modules/systemjs/dist/system.js"></script> 
<script src="node_modules/typescript/lib/typescript.js"></script> 
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="node_modules/rxjs/bundles/Rx.js"></script> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 

<!-- 2. Configure SystemJS --> 
<script> 
    System.config({ 
    transpiler: 'typescript', 
    typescriptOptions: { emitDecoratorMetadata: true }, 
    packages: {'app': {defaultExtension: 'ts'}} 
    }); 
</script> 
<!-- 3. Bootstrap --> 
<script> 
    System.import('app/boot') 
       .then(null, console.error.bind(console)); 

</script>

HTML

<!-- 4. Display the application --> 
<body> 
    <hello-world>Loading...</hello-world> 
</body>

創建一個app文件夾。在app文件夾內，添加boot.ts和helloworld.component.ts。

應用程序/ boot.ts

import { bootstrap } from 'angular2/platform/browser'; 
import { HelloWorld } from './helloworld.component'; 

bootstrap(HelloWorld);

應用程序/ helloworld.component.ts

import {Component} from 'angular2/core'; 

@Component({ 
    // Declare the tag name in index.html to where the component attaches 
    selector: 'hello-world', 
    // Location of the template for this component 
    templateUrl: './hello_world.html' 
}) 

export class HelloWorld { 
    // Declaring the variable for binding with initial value 
    yourName: string = ''; 
}

來源

2016-01-21 10:15:39 pixelbits

這裏是一個鏈接到一個種子項目與所述最低要求和代碼角2. Angular 2 seed project for Visual Studio 2015

2東西是雖然重要：

1 - 配置IIS服務器項目

2 - 下載最新的NodeJS（與最新的NPM），節點安裝後 - 置VS2015「外部Web工具」（你可以找到它在快速啓動）來使用nodejs位置（對於我來說默認是「c：\ Program Files \ nodejs」），並使用向上箭頭將其設置爲第一優先級。

來源

2016-05-06 06:16:39

開始與VisualStudio的，打字稿及Angular2

回答

相關問題