はまったりひらめいたり…とか…

.Net系プログラムで勉強したこととか嵌ったことについて書いたりします。

Angular2Tutorial + VisualStudio2015

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

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

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

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

TutorialSite

angular.io

package.jsonを改造

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

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

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

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

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

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をすすめることが出来ました

f:id:TakasDev:20160611002933p:plain

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

f:id:TakasDev:20160611005803p:plain