Angular2Tutorial + VisualStudio2015

Angular2のページで提供されているチュートリアルを

MVC4でやっちゃおうというものです（準備編）

基本的に前回作ったソリューションで

新しいものに入れ替えていくようなイメージとなります。

TutorialSite

angular.io

package.jsonを改造

前回作成したAngularの情報はちと古めだったみたいです。

チュートリアルのは、最新の動向にあわせている（はず）なので

そちらの流行によせておきます。

Tutorialで増えているファイルを追加していく。

• typings.json(root)
• systemjs.config.js(root)
• main.ts(appディレクトリ下)

上記それぞれが増えているので、ソリューションに追加します。

BundleConfigを変更

    bundles.Add(New ScriptBundle("~/bundles/angular2").Include(
        "~/node_modules/core-js/client/shim.min.js",
        "~/node_modules/zone.js/dist/zone.js",
        "~/node_modules/reflect-metadata/Reflect.js",
        "~/node_modules/systemjs/dist/system.src.js",
        "~/systemjs.config.js"))

app.tsを変更

Tutorialと同一ソースに変更します。

はまりやすいポイント

基本的には、チュートリアルのソースと見比べ

変更部分を反映させる方法でうまくいきました。

package.jsonを入替えて、パッケージのインストールをすると

下記のサイトで報告されているようなエラーが複数発生します。

stackoverflow.com

ただ、GitHubで報告された結果、解決方法が反映されているようですので

typings.json等の新しいJsonファイルを追加することで、解消されます。

エラーが出てもそのまま立ち止まらず、進めていくのがいいかもしれません。

github.com

結果Tutorialをすすめることが出来ました

構成は下図のような感じです。