前言

Visual Studio 2017已经发布了很久了。做为集成了Asp.Net Core 1.1的地表最强IDE工具，越来越受.NET系的开发人员追捧。

随着Google Angular4的发布。我一直在想，怎么能够用这个地表最强IDE工具编写Angular4的Asp.Net Core项目。经过不懈的研究。终于的得到了一套很好的解决方案与大家分享。

文章转载请著名出处：

我们的目的

随着Web技术的快速发展，新的技术层出不穷，这使得Web程序的用户体验不断提升。最具代表性的就是SPA(Single Page Application)应用。

技术的快速发展也有弊端，那就是学习成本的不断提升。作为一名开发人员，你需要不断学习、提升自己的技术以适应这个技术快速发展的时代，以让自己不在这个技术快速发展的洪流中所淘汰。

当然，我们的老大Microsoft也是如此，借着Asp.Net Core的机会，发布了好几款集成目前流行的前端框架的Asp.Net Core的模板。文章后边我就具体描述以一下。

你需要知道的东西你需要明白的东西

1. NodeJS,这是一个基于Chrome V8 JavaScript引擎构建的JavaScript运行时的库，NPM就包含在NodeJS中，他具有强大的生态系统。

2. NPM包管理器，是Node包生态系统的管理器。可以使用他安装Angular所有的包以及依赖包。

2. DotNet CLI，这是微软提供的命令行接口工具。用于开发跨平台.NET程序的工具链。如果你安装了VS2017,默认应该已经安装DotNetCLI工具。

3. AngularCLI，这是Angular官方发布的AngularCLI工具，可以使用他对Angular进行新建、编译、运行等操作。

4. ，这是微软推出的跨平台Web应用程序。功能强大。官方文档非常完善。

5. TypeScript，这是一种类型化的JavaScript，可以通过他编译生成Javascript，Angular就是基于TypeScript的。

6. RESTful API，这是一个很火热的Web应用程序API的设计理念。微软官网也写过一篇关于RESTful的文章，但实在太老了。于是用aisuhua的GitHub代替了

你需要了解的东西

1. 翻GFW，根据我国国情需要，GFW是“必须要有的”，这无可厚非。但是带来的问题就是开发人员的一手资料被屏蔽。所以你应该了解怎么翻GFW。

2. 国内NPM源，之后会细说。

3. WebPack，这是一个现代化的JavaScript模块打包器。具体内容可以去官网了解

也许有一些没有接触过以上提到的这些工具或知识的童鞋可能会一脸懵逼，但是不用担心也不用着急，本文会用最浅显易懂的方式告诉你如何配置。

微软SPA模板(不在本文讨论范围)

先说说老大Microsoft的模板。

想要安装微软官方提供的模板，我们就需要用到dotnet CLI工具了。这套模板是由微软Steve Sanderson提出并研发的。关于史蒂夫·桑德森，从2010年到现在，在微软从事Web技术工作。并且最先加入到Asp.Net MVC3的技术团队。构建了一系列JavaScript库以及Azure的门户网站。我们所熟知的Knockout.js就是这个人主导开发的。可以说是绝对的.Net技术大牛。

附上一张他的照片，还有他的Twitter。有玩Twitter的可以Follow他

回到正题，想要安装这个模板，你就需要使用DotNet CLI工具了。具体命令如下：

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

当你使用CMD或Powershell运行后会得到一下结果：

可以看到微软很给力，给我提供了好多模板。有Angular的，有Knockout的，有Aurelia的，有React的，有Vue的。可以说，非常全面。

可以使用如下DotNetCLI命令根据模板新建项目。

dotnet new angular

如果你了解dotnet CLI，你就会明白，这条命名的意义就是从当前目录使用MVC ASP.NET Core with Angular创建一个Asp.Net Core的项目。

新建成功后，使用如下命令还原.NET依赖包和Angular依赖包：

dotnet restore

npm install

完成之后你就可以运行程序，查看效果：

你不妨可以试试看，期间你可能需要一个高速VPN，否则你在执行npm install命令时，可能会有很多Angular的包安装不上。

有人会说，为啥我们不直接用微软的模板反而要自己去构建Asp.Net Core+Angular的应用程序呢。

其实原因很简单，微软一如既往的作风就是高度集成高度封装。他所提供的这些模板中，集成Server-side prerendering(服务端渲染)，WebPack dev middleware，Hot Module Replacement(模块热插拔)等等技术。最后再加上Angular。

如果你对这些技术了解程度不够，很难做到高度扩展。例如添加新的npm包也会有可能引起一些莫名其妙的异常。所以，我们才要自己去构建集成Angular的Asp.Net Core的应用程序。

有兴趣的童鞋可以自己去尝试一下。

让我们开始把1.新建一个Asp.Net Core项目

打开宇宙最强IDE，Visual Studio 2017，新建一个Asp.Net Core项目。并且取个名字，比如AspNetCoreWithAngular4：

之后我们创建一个空的Asp.Net Core 程序，我是用的版本是1.1

2. 配置我们的Asp.Net Core

这一步，我们需要配置一些Core的依赖包，并且设置Core在VS重构时MSBuild不去编译Typescript文件，因为我们要使用其他工具去编译Typescript文件。

直接打开csproj文件：

添加如下代码：

代码：

<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.3" /><PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.2" />

在我们的项目中，Microsoft.AspNetCore.Mvc包能够允许我们添加控制器并且构建WebAPI，而Microsoft.AspNetCore.StaticFiles包可以让我们配置提供静态目录访问的功能。例如默认提供/wwwroot目录的访问。

因为我们会使用其他工具去编译Typescript文件，所以需要在PropertyGroup节点中配置

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

保存csproj文件后，VS2017会自动下载相关包。如果你在MacOS或者Linux环境，请使用dotnet restore命令还原包。

3. 配置Startup.cs文件

首先在ConfigServives方法中添加MVC服务：

services.AddMvc();

如果VS出现红色波浪线，你需要关闭项目，重新打开项目即可。

之后，删除Configure方法中的所有代码，使用如下代码替换：