（此文章同时发表在本人微信公众号“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']);

你可以手动通过在gulpfile.js文件上点击右键选择Task Runner Explorer来执行“copy-deps”，也可以把这个任务添加到project.json中的scripts/prepublish里面。 不管采用什么方式，现在在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>

至此，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: }

添加TypeScript支持后，你会发现编译出错，这是因为没有引入es6-shim的DefinitelyTyped定义。要引入定义，需要在项目上打开命令行，执行“npm install tsd --save-dev”来安装tsd（TypeScript Definition manager），然后再执行“tsd install es6-shim --save”来安装es6-shim的TS定义。这样就可以解决编译出错的问题了。 这样，我们就可以使用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 { }

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

   1: import {bootstrap}    from 'angular2/platform/browser'
   2: import {AppComponent} from './app.component'
   3:  
   4: bootstrap(AppComponent);

然后在视图中通过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: }

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

ASP.NET Core和Angular 2双剑合璧相关推荐

  1. 开始使用ABP.CORE模板 (ASP.NET Core with Angular)

    前言 本文是翻译文章,如有翻译不正确的地方请指正. 其中内容大部分是官方原文,加上自己根据操作实现的心得. 官方 原文https://aspnetboilerplate.com/Pages/Docum ...

  2. 使用ASP.NET Core和Angular 8的服务器端分页

    目录 介绍 如何工作? 先决条件 使用代码 后端 步骤1 步骤2 步骤3 Web API 步骤1 步骤2 步骤3 步骤4 步骤5 步骤6 步骤7 步骤8 步骤9 完整的分页控制器代码 前端 步骤1 步 ...

  3. 52ABP模板 ASP.Net Core 与 Angular的开源实例项目

    阅读文本大概需要 5 分钟. 关注角落的白板报 开始之前 自从上一篇文章".NET:持续进化的统一开发平台"发布后,已经有三个月的时间没有写过文章了. 这段时间,做了两场线下活动, ...

  4. 深入研究 Angular 和 ASP.NET Core 3.0

    本文要点: 可以把多个 Angular 应用程序集成到 ASP.NET 网站中 把 Angular 代码打包成 Web 组件是引导 Angular 应用程序的好方法 可以把用 Angular 编写的 ...

  5. 使用Web API ASP.NET Core 2.2部署Angular 8应用程序

    目录 情境化部署方案 从理论到实践 后端和CORS,单独的章节 情境化部署方案 当我开始这个部署过程时,一个带有Angular应用程序的ASP.NET核心web应用程序,我花了几天时间尝试和错误方法, ...

  6. Angular 7和ASP.NET Core 2.1入门

    目录 介绍 背景 前提条件 使用代码 使用模板的Angular 7 Web应用程序(.NET Core) 步骤1--使用模板创建Angular 7 ASP.NET Core 第2步--构建并运行应用程 ...

  7. Angular 5和ASP.NET Core入门

    我希望你们都知道Angular 5已经发布了.在本文中,我们将看到如何使用Angular5TemplateCore开始使用Angular 5和ASP.NET Core. 使用Angular5Templ ...

  8. vue.js crud_如何使用VS Code和ADO.NET使用ASP.NET Core执行CRUD操作

    vue.js crud 介绍 (Introduction) In this article we are going to create a web application using ASP.NET ...

  9. 【转载】从头编写 asp.net core 2.0 web api 基础框架 (1)

    工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...

最新文章

  1. Java正则表达式校验工具类_【Java工具类】----正则表达式校验工具类
  2. 学习笔记：文本过滤_____unix 下的通配符
  3. POST教程笔记 - WinHttp获取网页源码
  4. 20135337朱荟潼——实验三
  5. BZOJ3270: 博物馆
  6. React Native使用指南-原生模块
  7. Linux服务器配置秘钥对连接
  8. 基于JAVA+SpringMVC+Mybatis+MYSQL的早教管理系统
  9. oracle 10G表空间创建的步骤
  10. 在eclipse上搭建和运行solr项目
  11. Vue基础知识总结（一）
  12. hrm系统源码php,悟空HRM下载_悟空HRM0.1开源版 - 系统之家
  13. 日文翻译-在线免费日文翻译软件
  14. Servlet基础：容器
  15. feature map理解
  16. 闲鱼怎么用快手做引流，快手怎么找痛点引流
  17. win10开机慢怎么解决_win10开机速度变慢的解决方法教程
  18. 华为AR1220路由器配置GRE隧道
  19. 少年歌行、少年白马、暗河传综合实力排行
  20. 科林明伦杯哈尔滨理工大学第九届程序设计竞赛

热门文章

  1. Redis配置文件（3）常见的配置修改
  2. 用Canvas创造一个太阳系
  3. C# 读取Excel CSV 类型文件到DataSet中，反之从DataSet写入excel
  4. 页面无法访问 css文件加载问题
  5. 真正解决ASP.NET每一个页面首次访问超级慢的问题 (转载)
  6. Android 短信开发学习
  7. 中国营销界：震惊全球的六种“武器”
  8. 首次使用mysql_mysql-8.0.20-winx64_初次使用过程（Win7x64）
  9. 图解Java多线程设计模式
  10. golang for 循环中使用协程的问题