在ASP.NET Core MVC中搭建基于TypeScript的Angular2项目

这是本人的第一篇博客。

我是一名比较喜欢追求新技术的野生程序员，技术水平有限，只是想记录和分享一些个人心得体会，文章中若有不正确之处，请海涵！

前言

对于一个没有学过TypeScript，不了解ES5、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，具体代码如下：

var gulp = require('gulp');

gulp.task('moveToLibs', function (done) {
    gulp.src([
      'node_modules/core-js/client/shim.min.js',
      'node_modules/zone.js/dist/zone.js',
      'node_modules/systemjs/dist/system.src.js',
      'node_modules/@angular/core/bundles/core.umd.js',
      'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
      'node_modules/@angular/common/bundles/common.umd.js',
      'node_modules/@angular/router/bundles/router.umd.js',
      'node_modules/@angular/forms/bundles/forms.umd.js',
      'node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'node_modules/@angular/compiler/bundles/compiler.umd.js',
      'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      'node_modules/@angular/http/bundles/http.umd.js'
    ]).pipe(gulp.dest('./wwwroot/libs/'));

    gulp.src([
      'node_modules/rxjs/**/*.js'
    ]).pipe(gulp.dest('./wwwroot/libs/rxjs/'));
});

运行一下这个任务，在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项目的本地环境就搭建完成了。