Visual Studio 2015でAngular2を起動します

少し前まで、最初のAngular.jsから2番目に作成されたアプリケーションを移行する問題に興味がありました。 ちなみに、この記事はそれについてのはずです。 しかし、事件は介入した。 その前に、Angular2をNode.jsでのみ調達しました。 そして、ここでは、主にVisual Studioで作業しているため、その下から実行することにしました。 私が経験しなければならなかったすべてのレーキヒットが終わった後、気がついたとき、別の記事でVisual Studio 2015のAngular2展開を分離することにしました。 そして、それは余分なものではないということを教えてくれます。

最初のステップ。 小道具。

最初に、Angular2が依存するほとんどすべてのパッケージがNPMにあるため、Node.jsおよびNPMで動作するようにVisual Studioを準備する必要があります。



NPM Task RunnerとPackage Installerを配置しました 。 これらは、スタジオとnpmの相互作用に役立ちます。





拡張機能をインストールした後、スタジオを実行して空のWebプロジェクトを作成します。 次に、Visual Studioで使用されるnode.jsとnpmを更新する必要があります。 スタジオはグローバルnpmとnode.jsを使用せず、ローカルを使用します。 彼女は、システムにインストールされているものについて何も知らず、外部Webツールにあるnode.jsに依存しています。 これがわからない場合、スタジオは古いコンポーネントを使用し、アプリケーションの起動に失敗します。 そのため、プロジェクトをクリックして、クイックインストールパッケージを選択します。 表示されるウィンドウで、gulpと入力して設定します。 もちろん、これは絶対に必要というわけではありませんが、率直に言って、私はpackage.jsonを手動で作成するのが面倒です。

gulpをインストールすると、package.jsonが取得されます。これをさらに操作できます。



そして、最初に行う必要があるのは、スタジオで使用するnode.jsとnpmのバージョンを確認することです。



「npm -v」および「node -v」コマンドを使用してスクリプトセクションをpackage.jsonに追加し、タスクrunner-aで実行します。





個人的に、私の結果は印象的でした：ノードv0.10.31とnpm 1.4.9。 繰り返しになりますが、これらはVisual Studioが使用するバージョンであり、インストールされたノードもグローバルnpmもこれらとは何の関係もないという事実に注目します。



さて、このジャンクはすべて整理整頓する必要があります。 package.jsonに新しいコマンド「updateNpm」：「npm install npm @ latest」を追加して実行します。 少し待ってから、getNpmVersionを実行します。 Npmは更新され、バージョン3.10.5になりました。



ただし、node.jsでは、このアプローチは機能しません。 正直に言うと、node.jsを更新する方法を見つけられませんでしたが、必要なインスタンスをスタジオに使用させる方法を見つけました。



そのため、まず、node.jsがインストールされている場所を見つけて、そこにパスをコピーします。 次に、[ツール]-> [オプション]-> [プロジェクトとソリューション]-> [外部Webツール]に移動し、ノードの通常バージョンを指す新しいパスを追加します（ない場合は、ダウンロードしてインストールします）。 最上部への新しい道を歩むことを忘れないでください。 スタジオを再起動し（Windowsを再起動する必要はありません）、getNodeVersionコマンドを実行します。 出来上がり、バージョンが更新されます。



タンバリンとのこれらすべてのダンスの後、私はコーヒーに行くことを提案します。 さらに、それも簡単ではありません。

ステップ2 依存関係のインストール。

私たちのproject.jsonを苦しめ続けましょう。 次に、アプリケーションのすべての依存関係を入力します。 依存関係は、ウィンドウに合わせて編集された5 MIN QUICKSTARTと 、小さいながらも非常に誇らしいニュアンスから取得されます。







次に、ランナーのタスクの下で、インストールコマンドを実行し、すべてのパッケージがインストールされるまで待ちます。 すべてがうまくいけば、node_modulesフォルダーに他のフォルダーがいくつかあるはずです。その中に「@angular」フォルダーがあります。 表示されている場合、これまでのところすべてが順調に進み、依存関係がインストールされています。 そうでない場合は？ cachem npmの問題が発生する場合があります。 パッケージがインストールされておらず、ランナータスクコンソール全体がエラーで赤くなっている場合は、package.jsonに別のコマンド「npm cache clean」を追加して実行してください。 たぶんこれが役立つでしょう。

ステップ3 Visual Studioのtypescriptを構成します。

タンバリンダンスでさらにいくつかのステップを行う番でした。

最初の.tsファイルを追加しましょう。 ルートにappフォルダーを作成し、空のapp.component.tsファイルをそこに追加します。 想像力を発揮しないで、自分の名前を考えてください。 くしゃみでもすべてが壊れる可能性があります。 スタジオを閉じます。





スタジオを閉じると、* .csprojファイルが見つかり、PropertyGroupノードに2つの新しい行が追加されます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでプロジェクトを開き、プロパティに移動して、新しいタブ-TypeScript Buildを確認します。

EcmaScript 6とModule System-Common Jsを設定します。 保存します。

ステップ4 コード。

これで、app.component.tsにコードの最初の行を追加できます

これをここにコピーして、プロジェクトをビルドします。





すべてが正常に実行された場合、ビルドはエラーなしで実行されます。 これは私たちの主要なコンポーネントです。つまり、これは私たちのアプリケーションです。



次に、起動するように設定します（ブートストラップ）。 これを行うには、ファイルをアプリフォルダーに追加します





そして再びプロジェクトをビルドします。 繰り返しますが、エラーはありません。 もちろん、構築することはできませんが、私は何とか落ち着いています。



次に、プロジェクトルートに追加します





そしてまた根へ

ステップ5 離陸を試みます。

そして今、宇宙飛行士を立ち上げます！ さて、アプリケーションを起動します。



すべてがうまくいけば、画面にMy First Angular 2アプリが表示されます。 準備ができたコードは、 こちらの github で入手できます 。



ここからテンプレートをダウンロードしてください



ご清聴ありがとうございました。