在ASP.NET Core MVC中搭建基於TypeScript的Angular2項目

這是本人的第一篇博客。

我是一名比較喜歡追求新技術的野生程序員，技術水平有限，只是想記錄和分享一些我的心得體會，文章中如有不正確之處，請海涵！

前言

對於一個沒有學過TypeScript，不瞭解ES五、Node.Js的初學者來講，想要直接學習Angular2真的是一件很苦難的事情。

本文使用Visual Studio2015建立一個含基架的ASP.NET Core MVC項目，而後將https://angular.cn/docs/ts/latest/guide/setup.html一文中的《快速起步》種子與項目結合起來（在靜態頁面中運行起來）。

建立ASP.NET Core MVC基架項目

請參閱https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/first-mvc-app/start-mvc。

導入種子

請在https://angular.cn/docs/ts/latest/guide/setup.html文章中下載《快速起步》種子，並解壓。

將quickstart-master文件夾下的全部文件包括文件夾複製到基架項目根目錄下，複製後NPM會自動安裝依賴項。（我在這裏遇到了某個包的測試文件與ASP.NET Core不兼容的問題，我把這幾個文件刪掉了，不知道有沒有其餘辦法解決）

將src中的全部文件包括文件夾移入wwwroot文件夾中，再將app文件夾和e2e文件夾移動到項目根目錄（與wwwroot同級），將main.ts移動到app文件夾中。最後將tsconfig.json移動到項目根目錄下，此時文件夾結構應該以下圖：

修改TS配置

修改tsconfig.json，加入保存時自動編譯、輸出文件夾位置、排除無用文件夾。修改後ts文件會自動編譯後輸出到wwwroot中（默認狀況下配置了靜態文件的MVC項目，而且放置在wwwroot中的文件才能被客戶端直接讀取）。

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "./wwwroot"
  },
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

修改NPM包配置

修改package.json，加入gulp，gulp加入到devDependencies下便可，它能夠幫助咱們自動移動類庫等。下面僅列出devDependencies部分，其他部分未修改。

"devDependencies": {
    "concurrently": "^3.2.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.1.0",

    "gulp": "3.9.1",

    "canonical-path": "0.0.2",
    "tslint": "^3.15.1",
    "lodash": "^4.16.4",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",

    "@types/node": "^6.0.46",
    "@types/jasmine": "2.5.36"
  },

使用gulp移動類庫

因爲咱們使用了MVC框架項目，沒有使用Node.Js服務器，「種子」中的index.html是沒法訪問node_modules文件夾的，咱們須要把這些類庫（js）所有移動到wwwroot文件夾中，這種煩人的工做就交給gulp來作吧。

visual studio中的gulp使用能夠參考https://docs.microsoft.com/zh-cn/aspnet/core/client-side/using-gulp。

在根目錄下新建一個gulp配置文件：gulpfile.js，具體代碼以下：

 1 var gulp = require('gulp');
 2 
 3 gulp.task('moveToLibs', function (done) {
 4     gulp.src([
 5       'node_modules/core-js/client/shim.min.js',
 6       'node_modules/zone.js/dist/zone.js',
 7       'node_modules/systemjs/dist/system.src.js',
 8       'node_modules/@angular/core/bundles/core.umd.js',
 9       'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
10       'node_modules/@angular/common/bundles/common.umd.js',
11       'node_modules/@angular/router/bundles/router.umd.js',
12       'node_modules/@angular/forms/bundles/forms.umd.js',
13       'node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
14       'node_modules/@angular/compiler/bundles/compiler.umd.js',
15       'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
16       'node_modules/@angular/http/bundles/http.umd.js'
17     ]).pipe(gulp.dest('./wwwroot/libs/'));
18 
19     gulp.src([
20       'node_modules/rxjs/**/*.js'
21     ]).pipe(gulp.dest('./wwwroot/libs/rxjs/'));
22 });

運行一下這個任務，在wwwroot中就能夠看到這些類庫了。

修改systemjs.config.js

因爲以前的步驟，咱們的文件夾結構與本來的例子有一些區別，咱們須要修改那些路徑。

(function (global) {
  System.config({
    paths: {
      'npm:': 'libs/'
    },
    map: {
      'app': 'app',

      '@angular/core': 'npm:core.umd.js',
      '@angular/common': 'npm:common.umd.js',
      '@angular/compiler': 'npm:compiler.umd.js',
      '@angular/platform-browser': 'npm:platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:http.umd.js',
      '@angular/router': 'npm:router.umd.js',
      '@angular/forms': 'npm:forms.umd.js',

      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:in-memory-web-api.umd.js'
    },

    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

修改index.html

index.html中的路徑部分也須要修改

<!DOCTYPE html>
<html>
<head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- Polyfill(s) for older browsers -->
    <script src="libs/shim.min.js"></script>
    <script src="libs/zone.js"></script>
    <script src="libs/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app/main.js').catch(function(err){ console.error(err); });
    </script>
</head>
<body>
    <my-app>Loading AppComponent content here ...</my-app>
</body>
</html>

運行項目

運行項目前先檢查一下wwwroot/app中是否已經生成了app.component.js、app.module.js、main.js三個文件。

若是他們都在了，那麼運行項目吧，因爲是MVC項目，默認首頁是Home/Index對應的Controller和View，請在路徑後加index.html訪問wwwroot/index.html這個靜態首頁。

 

這樣在ASP.NET Core MVC中基於TypeScript的Angular2項目的本地環境就搭建完成了。