風邪ひいてたりなんだりで全然ブログ更新してませんでしたー。っと。
Angular2とASP.NET MVC"4"をお仕事でいじることになりました。
Angular2 + VisualStudio(ASP.NET MVC"4") + VisualBasic.net
ニッチすぎて参考文献が少なく、VS上で動かすまでに色々と面倒くさかったのでメモ残します。
使用環境
- VisualStudio2015(Update2)
- TypeScript(1.8.29.0)
先に参考
Angular2 with TypeScript using Visual Studio 2015 - CodeProject
Angular2 Typescript in ASP.NET MVC Visual Studio 2015 – Russell Canfield – Code Blog
環境構築
1.ひとまずプロジェクトを作成
業務の都合上VB.netでプロジェクト作成していますが
今回記述ソースは.net側は、ほとんど何もありません。
VB.netなのでMVC5はテンプレート上存在しないので、MVC4を選択しました。
2.npmのpackage.jsonファイルを追加
rootにpackage.jsonを追加します。
記述するソースは下記のとおり。
- package.json
{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "start": "concurrent \"npm run tsc:w\" \"npm run lite\" " }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.1", "systemjs": "0.19.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "zone.js": "0.5.10" }, "devDependencies": { "concurrently": "^1.0.0", "lite-server": "^1.3.2", "typescript": "^1.7.5" } }
4.パッケージインストール
5.Rootディレクトリにtsconfig.jsonを作成
- tsconfig.json
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false, "outDir": "app/" }, "exclude": [ "node_modules" ] }
outDirに.tsファイルから生成した.jsファイルが出力されます。
6.BundleConfigにAngular2読み込みを追加
bundles.Add(New ScriptBundle("~/bundles/angular2").Include( "~/node_modules/es6-shim/es6-shim.js", "~/node_modules/systemjs/dist/system-polyfills.js", "~/node_modules/angular2/bundles/angular2-polyfills.js", "~/node_modules/systemjs/dist/system.src.js", "~/node_modules/rxjs/bundles/rx.js", "~/node_modules/angular2/bundles/angular2.dev.js", "~/node_modules/angular2/bundles/router.dev.js", "~/node_modules/angular2/bundles/http.dev.js" ))
7.app.tsを作成
scriptsディレクトリにappディレクトリを作成。
appディレクトリにapp.tsファイルを作成。
import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>Angular 2 Sample Application</h1>' }) export class AppComponent { }
8.エラー発生
app.tsに下記のエラーが発生
まずひとつ。TypeScript古いですよー。ってメッセージが出る。
これ、Resharperが入っている場合にでるエラーだそう。
ReSharperの設定をいじることで解決。
残りのエラー
これは、promise.d.tsに
declare var Promise: PromiseConstructor;
を加えることで解決できるらしい。
参考:
github.com
最後 _Layout.vbhtmlを改造
HEADに下記
@Scripts.Render("~/bundles/angular2") <script> System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, packages: {'app': {defaultExtension: 'js'}} }); System.import('app/boot') .then(null, console.error.bind(console)); </script>
BODYに下記を記述
<my-app>Loading...</my-app>