用于Visual Studio的ASP.NET Core + Angular 2模板

用于Visual Studio的ASP.NET Core + Angular 2模板

既然ASP.NET Core，Angular 2和TypeScript 2都已经发布了最终版本，那么现在是将它们全部组合到一个功能强大的富Web应用程序平台中的好时机。

发布于2016年10月4日

很多个月以来，我一直在GitHub仓库上与一些优秀的社区贡献者合作，以构建支持库，包，最终我们希望这些应用程序是理想的起点模板。除了在ASP.NET Core上托管TypeScript编码的Angular 2站点的基础知识外，该模板还包括：

• 服务器端预呈现，即使在浏览器下载JavaScript代码之前，您的UI也可以非常快速地显示出来
• Webpack中间件集成，因此在开发过程中，您不需要继续重建客户端应用程序，甚至不必在后台运行观察程序工具
• 热模块更换，以便在开发期间，无论何时编辑TypeScript文件，CSS文件或其他客户端资源，您的更改都会立即推送到浏览器中而无需重新加载页面（因此您不会丢失活动的调试会话等）
• 快速而精益的构建。在开发过程中，您不必每次更改自己的代码时都等待webpack重新分析第三方代码，因为我们将第三方代码分解为单独的捆绑包。此外，在开发过程中，您的超快速构建包括完整的源映射以帮助调试，而在生产中，您可以获得最小的缩小输出。在发布到生产期间，它会自动使用生产版本。

如果你想使用不同的框架怎么办？你更喜欢React，React + Redux还是Knockout？我们也为那些制作了等效的Yeoman模板。

如果您想使用其他IDE或在Linux或Linux上开发，该怎么办？ OS X.苹果系统？如果你没有在Windows上使用Visual Studio，那很好：使用我们的Yeoman生成器来获得与VS Code或任何操作系统上的任何其他编辑器一起使用的等效Angular 2，React，React + Redux或Knockout项目。毕竟，.NET Core是完全跨平台的。

安装

首先确保已安装这些先决条件。没有他们，事情就行不通！

• Visual Studio 2015 Update 3。请注意，Update 2还不够。您需要更新3，因为它修复了NPM的一些问题，而且它是TypeScript 2.0的先决条件。
• .NET Core 1.0.1
• 适用于Visual Studio 2015的TypeScript 2.0。如果Visual Studio一直抱怨Cannot find name 'require'，那是因为你忘了安装它。
• Node.js版本4或更高版本。由于此问题，我们暂时不支持Node 0.x ，但可能会在将来重新添加对Node 0.x的支持。要检查节点版本，请node -v在命令提示符下运行。

现在您已经检查了安装的先决条件，只需下载并安装ASP.NET Core Template Pack扩展。

创建和运行项目

当您具有上面列出的先决条件并安装了ASP.NET Core Template Pack扩展时，您可以转到Visual Studio的File New Project菜单，展开Web类别，然后选择ASP.NET Core Angular 2 Starter Application（.NET Core） ）：

为项目命名，然后单击“ 确定”。

现在，耐心等待Visual Studio恢复所有Node.js（NPM）依赖项！如果您的互联网连接速度不快，可能需要几分钟时间。

此时，您可能会遇到看起来像问题的东西，但实际上并非如此。当Visual Studio完成还原NPM依赖项时，它将显示“ 依赖项 - 未安装 ”：

但是，VS错了！您看到列出的软件包及其版本号就意味着它们已安装。在这种特殊情况下，您可以忽略“未安装”消息，但如果它足够困扰您，您可以按照Hanselman的步骤进行修复。

您现在可以运行您的项目。如果您没有使用键盘快捷键，请按Ctrl + F5启动而不进行调试（与任何其他VS项目一样），或点击工具栏中的“播放”图标（标记为IIS Express）。它会出现：

服务器端预渲染

点击入门网站。你会发现一些使用Angular 2构建的简单组件的例子。看起来似乎并不多，但幕后发生了一些很酷的事情。

第一件事是，即使这是一个通常在浏览器中运行的Angular 2应用程序，你的ASP.NET核心服务器也可以在服务器上运行它，所以它只是将普通的HTML发送到浏览器甚至没有需要JavaScript才能显示。

要向您自己证明这一点，请尝试在浏览器中完全禁用JavaScript（对于Chrome用户，请打开开发人员工具，按F1，选中“ 禁用JavaScript”框，然后重新加载页面，同时打开开发人员工具）：

您会发现您的应用程序与以前一样，即使您的浏览器无法执行任何客户端代码。您仍然可以通过单击侧栏链接进行导航。但请注意：导航是唯一可行的，因为这是一个基本的HTML功能。在“计数器”屏幕上，如果单击它，您会发现计数器按钮不起作用，因为它连接到JavaScript事件处理程序，而您现在还没有JavaScript。

那么服务器端预渲染有什么意义呢？

关键是不支持没有启用JavaScript的浏览器。这只适用于您的应用程序除导航之外没有任何功能的极端情况（在这种情况下，您为什么要将其构建为SPA？）。

真正的好处是：

1. 它可以显着改善用户的感知性能。即使他们使用慢速设备和慢速互联网连接，他们也可以在几分之一秒内看到您的应用程序的用户界面，或者阅读您正在展示的任何信息。在后台，您的潜在大型JavaScript包在后台下载，解析和执行，然后自动接管以使您的应用程序在客户端上完全正常运行。这比在应用程序加载时显示空白屏幕要好得多。
2. 它支持可能无法执行JavaScript的Web爬网程序。就任何搜索引擎而言，您只是返回普通的旧HTML，因此可以以正常方式对您的站点进行爬网和索引。

服务器端呈现存在限制。值得注意的是，您的应用程序代码不能仅仅假设它始终在浏览器中运行。如果您尝试直接引用浏览器的DOM，您将收到类似于window is undefined服务器端运行时的错误。幸运的是，这很少是一个问题，因为在一个架构良好的Angular应用程序（或React等）中，框架真的不希望你直接搞乱DOM，所以你不应该假设浏览器原语而不管服务器边渲染。

如果由于某种原因不想使用服务器端预呈现，请通过asp-prerender-module从<app>元素中删除该属性来禁用它Views/Home/Index.cshtml。

Webpack集成

此应用程序中的代码是用TypeScript编写的。这意味着您需要一个构建步骤才能运行。如果您使用SASS（编译为CSS）或希望将您的库代码捆绑和缩小，情况也是如此。

如今，现代JavaScript应用程序的主要构建系统是Webpack。它就像Grunt或Gulp，但是2016年。它处理TypeScript编译，捆绑和缩小，以及人们为其提供插件的大约一百万个其他东西。我们在模板中使用它，它可以实现一些很酷的功能：

Webpack dev中间件

通常，每当您更改其中一个TypeScript文件时，您必须webpack在命令行上运行以重新生成已编译的JavaScript文件wwwroot/dist。但是webpack dev中间件功能可以省去你这样做的麻烦。

如果您的应用程序在开发模式下运行（默认情况下从Visual Studio启动时），则Webpack将在后台运行并拦截任何文件请求http://yoursite/dist。它通过返回将在该位置的编译文件来处理任何此类请求，从而考虑您对源文件所做的任何更改。

因为Webpack编译器在内存中保持活动状态，所以它能够在通常构建时间的一小部分（通常大约十分之几秒）内生成递增编译的更新，因此您的开发体验不会中断，否则会的。

热模块更换（HMR）

您知道每次更改内容时必须重新加载页面是多么令人难以置信的拖累？好吧，我承认这不是人类痛苦的顶峰，但是如果你正在进行调试会话，或者在浏览器的内存中有状态会在重新加载时丢失，这是浪费时间。

HMR解决了这个问题。当您在开发模式下运行时，它默认启用，并且它会监视Angular应用程序源文件（TypeScript，HTML，CSS等）的任何更改。当某些内容发生变化时，它会使用内存中的Webpack编译器实例进行快速增量编译，并将更改推送到任何活动的浏览器窗口。您的应用程序将在不重新加载页面的情况下即时更新。

要查看此工作，请在开发模式下打开浏览器的调试控制台（例如，从Visual Studio启动）。你会看到这个消息：

看[HMR] connected？这意味着它已准备好接收更改。尝试编辑您的一个源文件。例如，ClientApp/app/components/home/home.component.html在这个美丽的动画GIF中编辑：

如果编辑CSS甚至是通过Webpack require语句加载的图像，则同样有效。

配置webpack

您将在项目根目录中找到Webpack配置文件，名为webpack.config.js和webpack.config.vendor.js。现在，Webpack是一个强大而复杂的工具，足以写出整本书。所以如果乍一看并不是很明显，请不要失望。如果你真的想要自定义它，请准备花些时间学习Webpack。

关于它如何在这个项目中设置的唯一值得注意的事情是我们将第三方依赖代码（即“供应商”代码）拆分成一个由webpack.config.vendor.js文件控制的单独包。这使得重建速度更快，因为Webpack不必在每次构建时重新分析像Angular 2这样的大型库。

您可以向您添加额外的第三方依赖项webpack.config.vendor.js，如下例所示。无论何时，请webpack --config webpack.config.vendor.js在命令行上运行以更新供应商捆绑包。如果需要，首先运行安装Webpack命令行工具npm install -g webpack。

添加第三方库

如今，大多数JavaScript库都是在NPM上发布的。这些库很容易包含在您的项目中（假设它们与您选择的其他技术一起使用，例如Angular 2）。

例如，假设您要使用Font Awesome，即“标志性字体和CSS工具包”。在Visual Studio中，打开package.json文件，然后添加"font-awesome": "^4.6.3"到列表中。Visual Studio将自动完成包名称并建议您当前的版本号。现在保存已编辑的package.json文件，VS将获取并安装新的NPM依赖项。或者，您可以npm install --save font-awesome在命令行上运行。

现在让我们将它添加到供应商包中。打开你的webpack.config.vendor.js文件，并称为数组内vendor（包括一'@angular/common'，'@angular/compiler'等），添加font-awesome/css/font-awesome.css。顺序无关紧要，但字母顺序很好：

我们怎么知道参考font-awesome/css/font-awesome.css？好吧，如果它是一个JavaScript库，你只需引用包名（例如，moment对于Moment.js）。但是，因为我们想要的font-awesome是CSS文件（以及CSS文件引用的其他内容，例如字体或图像），我们提供了我们想要的CSS文件的路径，如Font Awesome文档所指定的。

接下来，重建wwwroot/dist/vendor.js捆绑包很重要。我们不会一直自动重建这个，因为它需要一点时间（可能是10秒）。因此，在命令提示符下，在项目根目录下运行webpack --config webpack.config.vendor.js。如果您尚未安装该webpack工具，则需要先运行npm install -g webpack。

现在，Font Awesome的CSS文件（以及其他依赖项，如字体或SVG文件）位于供应商包中，因此现在您可以使用它。例如，ClientApp/app/components/navmenu/navmenu.component.html你可以使用Font Awesome的“计算器”图标：

...它会显示在您的页面上：

注意：如果您收到类似的消息Uncaught ReferenceError: vendor_1e69f8aba84bb345782b is not defined，那是因为（1）您忘了运行webpack --config webpack.config.vendor.js或（2）您这样做了，但还没有重新启动您的应用程序。由于供应商文件更改很少并需要一些处理时间，因此我们不会自动重建它们或将它们与HMR集成，因此在极少数情况下修改供应商包内容时，您需要自己重建并重新启动ASP .NET application.ke

发布到Azure

在部署之前，您需要解决我们即将修复的模板中的错误。我们（即我）忘记包含webpack-dev-externals在NPM依赖项列表中，并且在发布期间确实需要它。

转到package.json，并在依赖项列表中添加"webpack-node-externals": "^1.4.3"。

现在让我们部署

您可以使用任何常规部署机制将使用此模板创建的应用程序发布到任何ASP.NET Core主机。对于那些特别想要部署到Azure的人来说，这是一种方法。

首先，从Azure门户创建一个新的Web App。

重要！指定Node.js版本如果不这样做，它将使用旧版本，部署将失败。转到新Web应用程序的“ 应用程序设置”窗格，您将看到一个名为的配置条目WEBSITE_NODE_DEFAULT_VERSION。编辑值，输入最近的Node.js版本，例如6.7.0：

保存该更改后，转到Deployment Credentials配置窗格，然后输入一些新凭据。

然后，在“ 部署选项”下，设置“ 本地Git存储库”。

在此之后，当您转到Overview时，您将能够复制新的Git克隆URL。

回到在您的角2的应用程序的根命令提示（包含目录ClientApp，Startup.cs等等），初始化一个GIT中回购：

<span style="color:#4b505a"><span style="color:#4b505a"><code>git init
git add .
git commit -m "My first commit"
</code></span></span>

您现在可以remote使用之前从Azure门户获得的“Git clone url” 将Azure添加为Git仓库：

<span style="color:#4b505a"><span style="color:#4b505a"><code>git remote add azure https://[email protected]:443/my-angular2-site.git
</code></span></span>

显然，不要只是复制和粘贴上面看到的内容 - 将URL替换为您自己的Web App的URL。

现在，您可以将当前版本的应用推送到Azure：

<span style="color:#4b505a"><span style="color:#4b505a"><code>git push --set-upstream azure master
</code></span></span>

输入您刚刚选择的凭据，然后等待部署进行时等待。第一次部署将需要几分钟。完成后，请访问您网站的网址，并对您的精彩创作感到满意！

反馈

如果您对该项目的范围和方向有一般性意见，请在下面发布！我很想知道这对你有用（或不对）。正如我上面提到的，如果您正在为React，React + Redux或Knockout寻找类似的项目模板，或者如果您不使用Windows或Visual Studio，那么您不会被排除在外：您可以使用我们的Yeoman生成器代替。

或者，如果您遇到任何特定问题并认为您发现了错误，请在Github上提交问题（请不要将其作为对此博客帖子的评论发布）

http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/