ASP.NET Core和Angular 2双剑合璧

Posted 2020-06-24 魔法花园 － .NET版

（此文章同时发表在本人微信公众号“dotNET每日精华文章”，欢迎右边二维码来关注。)

题记：两个还没有正式发布的东西一起用，是什么效果？

效果当然会很好了（我猜的），那么如何在ASP.NET Core中集成Angular 2呢？Nicolas Bello Camilletti的一篇文章就给大家分享了一些技巧。

作为微软全新的Web开发框架，ASP.NET Core项目的结构不仅和node.js有几分神似，也同样利用了大量的第三方开源工具来辅助客户端库的安装和任务执行，比如npm和bower（用于依赖管理和安装），gulp用于任务执行。

所以在ASP.NET Core项目中安装Angular 2也自然而然是通过npm来进行咯。具体步骤如下：

1. 通过VS2015或者yeoman新建一个ASP.NET Core的Web项目
2. 在VS2015中展开项目下的“Dependencies”，在“npm”上点击右键，选择“Open package.json”或者直接到项目文件夹里打开package.json文件
3. 编辑package.json文件，在devDependencies下面添加“angular2”的配置（我在写这篇文章的时候，版本号是"2.0.0-beta.9"）和“systemjs”（一个轻量级ES6模块加载器），保存，VS会自动调用npm install来安装angular及其依赖的包。
4. 由于通过npm引入的包，其只会下载到node_modules里面，我们还需要通过gulp任务把所需要的文件copy到wwwroot下才能被浏览器访问到。这个时候，打开gulpfile.js这个文件，在文件末尾添加上下面的代码：

   1: paths.npmSrc = "./node_modules/";

   2: paths.npmLibs = paths.webroot + "lib/npmlibs/";

   3:  

   4: gulp.task("copy-deps:systemjs", function () {

   5:     return gulp.src(paths.npmSrc + ‘/systemjs/dist/**/*.*‘, { base: paths.npmSrc + ‘/systemjs/dist/‘ })

   6:          .pipe(gulp.dest(paths.npmLibs + ‘/systemjs/‘));

   7: });

   8:  

   9: gulp.task("copy-deps:angular2", function () {

  10:     return gulp.src(paths.npmSrc + ‘/angular2/bundles/**/*.js‘, { base: paths.npmSrc + ‘/angular2/bundles/‘ })

  11:          .pipe(gulp.dest(paths.npmLibs + ‘/angular2/‘));

  12: });

  13:  

  14: gulp.task("copy-deps:es6-shim", function () {

  15:     return gulp.src(paths.npmSrc + ‘/es6-shim/es6-sh*‘, { base: paths.npmSrc + ‘/es6-shim/‘ })

  16:          .pipe(gulp.dest(paths.npmLibs + ‘/es6-shim/‘));

  17: });

  18:  

  19: gulp.task("copy-deps:rxjs", function () {

  20:     return gulp.src(paths.npmSrc + ‘/rxjs/bundles/*.*‘, { base: paths.npmSrc + ‘/rxjs/bundles/‘ })

  21:          .pipe(gulp.dest(paths.npmLibs + ‘/rxjs/‘));

  22: });

  23:  

  24: gulp.task("copy-deps", ["copy-deps:rxjs", ‘copy-deps:angular2‘, ‘copy-deps:systemjs‘, ‘copy-deps:es6-shim‘]);

5. 你可以手动通过在gulpfile.js文件上点击右键选择Task Runner Explorer来执行“copy-deps”，也可以把这个任务添加到project.json中的scripts/prepublish里面。
6. 不管采用什么方式，现在在wwwroot/lib/npmlibs下面已经出现了angular2相关的js文件，我们还需要把他们引用到Layout.cshtml中（放到head结束之前）：

   1: <environment names="Development">

   2:   <script src="~/lib/npmlibs/es6-shim/es6-shim.js"></script>

   3:   <script src="~/lib/npmlibs/systemjs/system-polyfills.src.js"></script>

   4:   <script src="~/lib/npmlibs/angular2/angular2-polyfills.js"></script>

   5:   <script src="~/lib/npmlibs/systemjs/system.src.js"></script>

   6:   <script src="~/lib/npmlibs/rxjs/Rx.js"></script>

   7:   <script src="~/lib/npmlibs/angular2/angular2.js"></script>

   8:   <script src="~/lib/npmlibs/angular2/router.js"></script>

   9: </environment>

  10:  

  11: <environment names="Staging,Production">

  12:   <script src="~/lib/npmlibs/es6-shim/es6-shim.min.js"></script>

  13:   <script src="~/lib/npmlibs/systemjs/system-polyfills.js"></script>

  14:   <script src="~/lib/npmlibs/angular2/angular2-polyfills.min.js"></script>

  15:   <script src="~/lib/npmlibs/systemjs/system.src.js"></script>

  16:   <script src="~/lib/npmlibs/rxjs/Rx.min.js"></script>

  17:   <script src="~/lib/npmlibs/angular2/angular2.min.js"></script>

  18:   <script src="~/lib/npmlibs/angular2/router.min.js"></script>

  19: </environment>

7. 至此，Angular2就添加到ASP.NET Core项目中了。如果你打算用TypeScript来编写的Angular2代码，那么还需要额外对TypeScript进行配置：通过VS2015的添加新文件的功能添加一个tsconfig.json文件（TypeScript JSON Configuration File），额外添加修饰声明，并配置systemjs作为模块加载器。完整代码如下：

   1: {

   2:   "compilerOptions": {

   3:     "noImplicitAny": false,

   4:     "noEmitOnError": true,

   5:     "removeComments": false,

   6:     "sourceMap": true,

   7:     "target": "es5",

   8:     "emitDecoratorMetadata": true,

   9:     "experimentalDecorators": true,

  10:     "module": "system",

  11:     "moduleResolution": "node"

  12:   },

  13:   "exclude": [

  14:     "node_modules",

  15:     "wwwroot/lib"

  16:   ]

  17: }

8. 添加TypeScript支持后，你会发现编译出错，这是因为没有引入es6-shim的DefinitelyTyped定义。要引入定义，需要在项目上打开命令行，执行“npm install tsd --save-dev”来安装tsd（TypeScript Definition manager），然后再执行“tsd install es6-shim --save”来安装es6-shim的TS定义。这样就可以解决编译出错的问题了。
9. 这样，我们就可以使用TypeScript来编写Angular2的组件，组件代码如下（放到wwwroot/app/app.component.ts）：

   1: import {Component} from ‘angular2/core‘;

   2:  

   3: @Component({

   4:     selector: ‘my-app‘,

   5:     template: ‘<h1>My First Angular 2 App</h1>‘

   6: })

   7: export class AppComponent { }

10. 在wwwroot/app中添加一个boot.ts文件作为Angular2应用程序的启动点：

   1: import {bootstrap}    from ‘angular2/platform/browser‘

   2: import {AppComponent} from ‘./app.component‘

   3:  

   4: bootstrap(AppComponent);

11. 然后在视图中通过systemjs来加载这些组件了（记得先添加<my-app></my-app>这样的HTML标记，因为我们组件的选择器是my-app）：

   1: @section Scripts {

   2:     <script>

   3:         System.config({

   4:             packages: {

   5:                 ‘app‘: { defaultExtension: ‘js‘ },

   6:                 ‘lib‘: { defaultExtension: ‘js‘ },

   7:             },

   8:         });

   9:  

  10:         System.import(‘app/boot‘)

  11:             .then(null, console.error.bind(console));

  12:     </script>

  13: }

12. 最后，我们就完成了在ASP.NET Core中开发Angular2应用程序的基本代码结构了（注意调试的时候不能使用IE，不然会报错，只能使用Edge或者Chrome之类）。