2016-04-03 16 views
2

Visual Studio 2015 proでAngular2を使用する方法を理解するために、stackoverflowを広範囲にわたって使用しました。本当の答えはありませんが、私はそれが働いていることがわかりました。 私は束を見てきました。私は、Angular2プロジェクトでVisual Studio 2015 Proを使用するための手順と例をたくさん示しています。これで、Visual Studio Communityを使用しているすべての指示を少し混乱させたり、他のエディタを使用したりできます。ここで私が自分の実験を使って見つけたのは、Yakov FainとAnton Moiseevの "Angular 2 Development in Typescript"というテーマに関する良い本の始まりです。マニングの出版物から入手できます。とにかくここにプロジェクトのための私の基本的なセットアップです。Visual Studio 2015でAngular2のプロジェクトを開始

最初にNodejsをインストールします。これはパッケージマネージャーにも使用できるようになっています。 NuGetを使ってやり直すのではなく、ウェブサイトからWindowsインストールパッケージをインストールするだけです。また、別のpakcageマネージャーを試しましたが、Nodeは最新のパッケージを持っていると思います。次に、npm initを実行すると、デフォルトのpackage.jsonファイルが作成されます。その後それを編集し、それは次のように多かれ少なかれ見えるように:

{ 
    "name": "helloworld", 
    "version": "1.0.0", 
    "description": "test npm setup", 
    "main": "main.ts", 
    "scripts": { 
    "start": "live-server" 
    }, 
    "author": "name", 
    "license": "ISC", 
    "dependencies": { 
"angular2": "2.0.0-beta.0", 
"es6-promise": "^3.0.2", 
"es6-shim": "^0.33.3", 
"reflect-metadata": "0.1.2", 
"rxjs": "5.0.0-beta.0", 
"systemjs": "0.19.8", 
"zone.js": "0.5.10" 
}, 
"devDependencies": { 
"live-server": "^0.8.2", 
"typescript": "1.7.5" 
} 
} 

今、あなたはpackage.jsonファイルを持っていることを、次のプロジェクトディレクトリでコマンドプロンプトを取得し、次のように入力することです。

Npm install

これは、angular2で利用可能なすべてのパッケージを持つnode_modulesフォルダを作成します。

次に、project/properties/TypeScript Buildセクションに移動し、ページのModule Systemセクションの "CommonJS"をクリックする必要があります。次に、プロジェクトを右クリックしてアンロードし、右クリックして編集する必要があります。次のセクションを探します。我々はほぼ完了している

<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata> 
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> 

OK:

<PropertyGroup Condition="'$(Configuration)' == 'Debug'"> 

ダウン、そのセクションの下部に次の2行を追加します。プロジェクトに含める

/node_modules/typescript/lib/typescript.d.tsは

そして、あなたのプロジェクトでこれを含め右クリックして、その上および選択:あなたはnode_modulesフォルダを歩くと見つける必要があります。私はこれにいくつかの変更があると思いますが、typescriptのVSインストールをAngular2で動作させるようにするには、専門家だけでは大した試行の後にメインキーであるエラーを知ることができません。今私は赤い虫を見るのが好きではないので、Index.htmlに行きましょう。これまでにブートhtmlページと呼んでいたものを、自分のインクルードソースを見つけ出し、それらをインクルードします。ここで私は、基本的なアプリを持っている含まれている:私はこの結論になって過ごしたどのように多くの時間を信じることができない

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/typescript/lib/typescript.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 

。私はこの作業を行うために複数の異なる、時には相反する方法を読んでいます。私はこれが仲間の初心者がこぶしを乗るのを助けることを願っています! M.Gamble @

+0

あなたは、そのjsonファイル内に 'tsconfig.json'とtypescript設定を追加しようとしましたか?私は私のコードで同様の問題を抱えていました。あなたは[この回答を参照することができます] http://stackoverflow.com/q/35094164/2435473) –

+0

実際にはありません。私はAngularにちょっと新しいですし、angularjをangle2に飛び越そうと決めました。私はそれを証明することはできませんが、内側からあなたのプロジェクトを実行している場合私はそれがtsconfig.jsonファイルを無視すると思う。私はChromeでアプリを実行していますが、IEでitninを実行できますが、スクリプトタグを追加する必要があります。それらを便利にしないでください。 –

+1

私は本をもう少し読んだ後、私は輸入経路のいくつかの問題に遭遇しました。 Angularのエキスパートでなくても、自分のプロジェクトをaにコピーして、tsconfig.jsonとconfig.jsを追加しました。その時点で、私は最近のVS2015のアップデート2までVSがプロジェクトのプロパティのTypescriptセクション全体がグレイアウトされていないとわかったとは思わない変更に気づいたので、json設定の使用に関するメッセージを思います。 Sooo私は、VSがこれらのノード/タイスクリプトの設定を使用するのは事実であることを知っています。まだChromeでしか動作していないことに気をつけてください。 Missing include .. –

答えて

0

- あなたは、ASP.NET MVC 5を探している場合は、あなたのVS 2015を使用して2角度を実行するために、ASP.NETコアのWebアプリケーションを使用しては、このリンクにhttp://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

に従ってください、そしてコメント欄を経由すると仮定すると、上記リンクの彼らはあなたを助けるかもしれません。

+0

いいえ、私はこれをTypescriptテンプレートのtypescript html appから開始しています。 –

0

最近のいくつかの実験の後で、プロジェクトのルートにtsconfig.jsonファイルを追加すると、プロジェクトファイルのキーの設定を避けることができます。Visual Studio 2015がtsconfigファイルを見つけたら、それを使用してプロパティの通常のTypeScriptビルドセクションをグレーアウトします。プロジェクトの開始後に追加する場合は、プロジェクトを終了してVSを再起動する必要があるかもしれません。

+0

私はこれがまさに答えではないことを知っていますが、私のような初心者を困らせないようにしています。いくつかのハッキングを行った後で、/node_modules/angular2/ts/typings/tsd.d.tsをインクルードとしてプロジェクトに追加することはできません。代わりにtsdを使用して、次の操作を行います:tsd query angular2 --action install後で追加するスクリプトディレクトリを含めることを忘れないでください。 –

+0

import {x、y}のようなものを ""から実行するときに、重複したインポートにも遭遇しました。 Angular2、typescriptはローカルサーバーを使用してこれに問題はなく、VSはまだ問題なくエラーなしでChromeセッションを実行します。これらのインポートをそれぞれ別々の行に置くと、エラーは発生しません。今、私は8つのモジュールがコンパイルされ、問題なく実行されていると言うサンプルプロジェクトを手に入れています。 –

関連する問題