ASP.NET Core + Angular 2 Template for Visual Studio

多个月以来，我和多个Github上的社区贡献者一起建立支持库、包，我们最终的目的是希望完成这样一个作为起点的模板，也就是基于把Typescript代码和Angular2宿主在ASP.NET Core项目中，这个模板包含一下这些方面：

服务端预加载（预渲染）：这样你的UI可以快速的显示，甚至在浏览器下载Javascript之前。
Webpack中间件集成：在开发期间，你不需要一直重新编译你的客户端项目，或者你可以用一个watcher工具在后台帮你做这些事。
模块热拔插：在开发期间，一旦你编辑了一个Typescript文件、CSS文件、或者其他客户端资源，你的改变也将在不刷新页面的情况下立即推送到浏览器。
快速构建：对于开发来说，你不需要再等待再每次更改之后，webpack去重新解析第三方代码，因为第三方类库将会独立到另外的一个bundle中，另外，超快速的构建包含了所有的map文件便于调试，再发布版本的文件中却将直接输出压缩版本，再发布过程中，这些工作将自动完成。

那如果你想使用一个不一样的framework呢？如果你倾向于React、React+Redux或者Knockout，我们也同样为他们提供了模板。

假如你是在Linux和MacOS开发，或者使用其他IDE，使用我们的Yeoman生成器来获得在VS Code或者其他编辑器上对于Angular2、React、React+Redux或者knockout项目的相同支持，.NET Core是完全跨平台的。

安装

首先，确保你已经安装了一下必须内容，没有他们事情就无法进行下去了：

Visual Studio 2015 Update3：注意Update2是不够的，你需要Update3，因为它修复了一些关于npm的bug，而且它是使用Typescript的先决条件。
.NET Core 1.0.1
TypeScript 2.0 for Visual Studio 2015：如果你的VS2015一直"抱怨" Cannot find name 'require',这就是因为你忘记了安装本插件。
Node.js 4及以上：因为一些issue ,我们暂时不支持Node 0.x，使用node -v检查你的Node版本。

当你确认过以上内容安装之后，下载并安装 ASP.NET Core Template Pack Extension

创建并且运行项目

当你完成安装以上所有内容后，你可以打开VS2015 创建新项目，展开Web目录，选择 ASP.NET Core Angular2 Starter Application(.NET Core)

键入一个名字，点击OK，现在耐心等待一段时间，让Node.js安装所有依赖项目，考虑你的网络环境，这可能需要一段时间（而且，考虑国内环境）

一切就绪之后，项目中看起来可能回出现一点问题，但是实际上并不是这样，当VS2015完成安装依赖后将会显示not installed

然后，VS犯了个错，事实上是因为一个只在macos上的可选依赖没有安装成功，你可以选择视而不见，但是如果你是个强迫症患者，那么看这里，追随大神的脚步，去解决掉它。

现在，你可以运行这个项目了，按下Ctrl+F5试试吧，以下内容将会显示在你的浏览器里：

在浏览一遍这个站点之后，你会发现一些简单的angluar2 component的例子，这看起来倒不是什么牛逼了的事，但是歧视已经在你看不见的地方发生了一些牛逼拉瞎的事情。

第一件事，虽然通常angular2运行在浏览器里，但是ASP.NET Core Server也可以让他运行在服务器端，所以它可以仅将HTML代码发送到浏览器，不需要javascript就可以显示内容。

为了证明它，你可以通过禁用浏览器的Javascript功能，然后刷新页面来查看内容，对于Chrome来说，你可以打开F12控制台，点击设置，在里面找到Disable Javascript复选框，并且反选它。

刷新页面，你会发现一切看起来和之前一样，左边的tab还是可以工作，但是一些依赖javascript的内容就不再可以运行了，比如counter。

意义并不在于让支持哪些不运行javascript的浏览器，它只是一种极端情况而已（如果为了这种极端情况，那还为什么要建立一个SPA应用呢？）

它真正的意义在于：

它极大的提高了用户体验：及时他们是在一个较慢的网络环境或者设备上，也可以在很快的看到你想显示给他们的内容，在这背后，你可能又一个很大的捆绑javascript正在下载、转换并且执行，然后紧接着接管页面实现绑定你的那些功能，这比花很长时间加载javascript代码，让客户看到一个空白的网页好的多。
它支持一些能不运行javascript的爬虫：对于搜索引擎来说，返回简单的HTML代码对于他们来说是更简单的理解和收录的。

假如你不想使用预加载，可以通过移除在Views/Home/Index.cshtml中的app标签的asp-prerender-module属性来禁用它。