angular2+typescript在asp.net MVC Web項目上的實現

網上如今尚未關於angular2+typescript在asp.net mvc web項目上的實現的系統介紹，這裏我也只是探索到了一個簡單的方式，還有不少問題沒能解決。可是能有個好的開頭也值得記錄一下。

Angular 2 TypeScript 環境配置

這個環境配置是必須的，因爲一直沒找到如何直接在VS上作這個環境配置，所以我按照菜鳥教程（http://www.runoob.com/angularjs2/angularjs2-typescript-setup.html）上的步驟一步一步的配置的，這個沒什麼難的，但仍是簡單介紹一下，由於這個很重要，首次學習這個必需要按照教程上的步驟完成基本的環境搭建，這樣在後面在asp.net項目中使用這個纔會簡單一點。

一、在vs2017上建一個asp.net mvc4的項目（我看網上已經有關於.NET Core項目上使用angular+typescript的介紹了，可是一直沒有asp.net mvc framework這方面的介紹）。這裏建的mvc4，網上有關於mvc5這方面的介紹，可是我沒能創建出MVC5的項目，也就沒去試過網上的方法是否是好使。

 

 二、在項目中創建一個Home文件夾，爲何要創建Home文件夾，這個確定是有緣由的，後面會說。如今將菜鳥教程中關於angular2+typescript環境配置的幾個配置文檔複製到這個home文件夾下。這幾個文檔我是徹底照抄菜鳥教程上的

可是有點小小的變更，看圖，這地方之因此要這樣，是由於我在配置的時候，按照教程上的寫法，會報錯，具體什麼錯我忘記了，可是這樣改了之後就能夠了。

三、打開cmd，定位到Home文件夾，執行命令npm install開始下載文件 ，這個大概等幾分鐘就安裝好了

若是 在安裝的時候，出現下圖所示的結果，半天沒有變更的話，就從新建項目從新安裝吧，估計是哪裏出問題了。 

 安裝完成後，在home文件夾下面多出了兩個文件夾（node_modules，typings）和一個文件package-lock.json

四、在home文件夾下創建文件夾app，在裏面創建3個文件：main.ts，app.module.ts，app.component.ts。文件的內容參照菜鳥教程上的。

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
 
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>個人第一個 Angular 應用</h1>'
})
export class AppComponent { }

五、如今編譯項目，出現了下面9個錯誤。實在不明白爲何有這樣的錯誤

點開錯誤所在的文件，將這兩個地方註釋後，再次編譯就能夠了。爲何會出現錯誤呢，搞不懂，多是配置文件某個地方不對吧，反正如今是搞不懂的，這方面的資料太少了，研究不出結果來，只好註釋了。

六、在Home/Index視圖中添加代碼，固然這段代碼根據須要，看你添加在哪一個視圖，通常來說，會添加到_Layout.cshtml的head中，因此我也添加到這裏了

<!-- 1. 載入庫 -->
    <!-- IE 須要 polyfill -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. 配置 SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>

七、在Home/Index視圖中添加標籤：<my-app></my-app>，爲何是這個標籤，相信你若是真的學完了菜鳥教程上的環境配置的內容就不會有這個疑問了

八、運行網站，進入默認的index頁面，發現什麼也沒有

 

看看錯誤是什麼，就是這些東西找不到，這些文件是存在的，可是爲何要在這個目錄下去找，而不是在Home文件夾下面去找

看了一下，以爲問題可能出在第六步添加的代碼，路徑不對嘛，因此我在對應的路徑上添加了~/Home/，像這樣

而後再次運行，發現默認頁面仍是沒出現我想要的結果。而後此次報的錯誤是找不到app文件夾下面的main.js文件，又是路徑不對

暫時找不到問題的解決辦法，因此將代碼還原。 

這個問題一直想不明白，也許你想到的問題的關鍵是我上面的第二步不該該建什麼Home文件夾，讓後將配置文件都放到裏面去，而是直接放在項目的根目錄下面。可是我很負責任的告訴你，這樣作，確實在訪問默認頁面的時候會讓你成功的看到你想要的結果，

可是若是你把默認的頁面的地址換成http://localhost:52696/home/index，那就又會出現上面提到的錯誤了。 我之因此要在第二步創建一個Home文件夾，而後配置文件都放在裏面，其目的是也是爲了解決這個問題，由於我這樣作，當個人地址是http://localhost:52696/home/index的時候就正常。解釋了這麼多，總結起來就是，要想讓home控制器中的視圖可以應用標籤<my-app></my-app>，就必須按照上面第二步的那樣作。這個問題暫時沒找到解決的辦法，相信確定也會有辦法解決的，否則的話，整個項目的目錄結構就很差組織了。

 

至此，angular2+typescript在asp.net mvc framework（不是.NET Core或者mvc5項目啊，聽說這兩種項目在網上能找到有關這方面的介紹，可是我沒試，不知道結果如何）項目的初步應用算是完成了，雖然存在問題，但至少已經開頭了。

接下來的工做就是如何用angular2+typescript來寫組件了，這個在網上就有不少介紹了，這裏就不說了，由於我也纔開始學，不是很瞭解。