从 Visual Studio 2017 年部署 Angular 2 个应用程序

Question

我用的是Visual Studio2017，开发过两个Angular2的应用。第一个是纯 Angular2，没有后端代码（数据来自 wcf 服务）。第二个是 Angular 2 SPA 应用程序托管在 MVC 应用程序 (.net 4.6) 中。它们都很好用，我可以运行并在 VS2017 中毫无问题地编辑它们。问题来自部署到 IIS 服务器。目前，我正在使用 gulp 将 node_modules 目录中的组件捆绑到 .js 文件中。然后我手动将应用程序的所有文件（包括 gulp 捆绑文件）复制到服务器。这是一个费力的过程，我想找到更好的方法。我希望 Visual Studio 会提供模板来创建上述两种类型的 angular 2 应用程序，并发布功能来捆绑应用程序，包括单击按钮时必要的 node_module 组件但一直很失望。尽可能接近此功能的最佳选择是什么？请帮忙

Answer 1

这与我一直在进行的安排完全相同，"holy grail" 使用 Visual Studio (2015/2017) 来开发和调试 Angular 2 front-结束（Material 设计 UI），在我的案例中由 WebAPI 服务端点支持，具有 Entity Framework 数据库层。正如您所说，获得适合所有需求的体面工作安排并非易事。但是，对于 Visual Studio 2017，我相信我的设置工作起来相当舒适，我也可以将其部署到我们的内部 TFS 构建系统。

我目前使用的是@angular-cli 基础，尽管它本身并不是必需的。初始化后，您应该可以访问 npm 脚本来执行启动（也称为 ng serve）和构建。在 VS2017 中，您可以使用 Task Runner（如有必要，安装适用于 VS2017 的 NPM Task Runner Extension）window 来配置运行使用 "ng serve" 命令打开您的项目。这将开始 webpack 捆绑和持续监控文件更改；后面的部分对于在VS2017中顺利调试和开发环境很重要，将它与项目打开事件联系起来让你的手多了一步。

然后我通过手动编辑项目文件并在 TypeScript 版本下方添加以下键来禁用 VS2017 typeScript 编译：

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

我这样做有两个原因：Webpack bundler 持续监控为我处理编译，VS2017 也不需要这样做，这让我可以确保我正在使用 npm 包编译 TS在 VS2017 有时顽固地坚持使用的工具上安装 typescript，尽管我覆盖了“选项”菜单中的路径。

我在 VS2017 中使用 Chrome 作为我的浏览器，因为现在速度超过了 IE11。出于某种原因，使用 VS 调试引擎运行中的 IE11 对于初始加载来说真的很慢；我相信这是因为 VS 必须如何解析捆绑在每个 Webpack 捆绑包中的每个单独文件。 Chrome 似乎运行它像个冠军。具有讽刺意味的是，Edge 运行的速度几乎与 Chrome 相同，但即使在 2017 年使用全新的 VS2017，VS2017 也不支持 Edge 调试 - 看图。

VS2017 文件中的断点即使在 Chrome 运行浏览时也会命中，这是一个不错的奖励。我看到的唯一问题是我通常必须在 VS2017 中开始调试，让 Chrome 启动我的站点，然后立即刷新页面以便 VS2017 正确解析源映射。我还注意到，我倾向于将我的断点放在我的 TS 文件的副本中，这些副本显示在主动调试时出现的解决方案资源管理器的 "Scripting Engine" 块中，因为直接在我的解决方案文件中设置断点不会'似乎在 Chrome 下触发。我强烈怀疑这是因为我的源映射没有使用正确的原始文件路径进行编译，因此 VS2017 无法知道 "Scripting Engine" 中的文件与我的解决方案中的特定文件相关联。我还在研究这个。

我为这种安排不得不解决的最后一个难题是启用 CORS，以便网站前端 (Angular) 可以在 VS2017 中调试时连接到我的 WebAPI 后端。由于@angular-cli 内置的精简版服务器托管前端，而 VS2017 启动 IISExpress 托管后端，因此它们将位于不同的端口。我必须将 CORS 访问添加到我的后端（我通过 global.asax.cs 文件在全局范围内完成，并包装在条件编译标志中以确保它仅用于 DEV/local 调试版本）以允许前端对后端的另一个端口进行服务调用。不过效果很好。

编辑： 为了稍微补充一点，我改进了我的做法，以更好地支持 VS2017 中的调试。当我启动 Angular CLI 项目时，我通常让 VS2017 制作一个空网站项目，以便创建项目目录。然后我转到命令提示符，进入该文件夹，并使用 Angular CLI 工具使用以下命令生成我的骨架应用程序：

ng new -si -sg -dir . MyApp

我指定的参数跳过包安装（因为一旦我保存一次 package.json 文件，VS2017 就可以这样做），跳过 git（我个人不使用，因为我工作在不使用 git 的 TFS 房屋中），并以 Angular 应用程序的工作目录为目标（因为我不希望它创建额外的目录级别）。

然后，一旦完成，我使用 Angular CLI 的 ng eject 命令强制 CLI "eject" 该工具对 webpack 捆绑和构建过程的控制。这使 CLI 工具写出它使用的所有配置文件。我这样做是因为我需要进入 webpack.config.js 文件以稍微不同地处理 sourcemaps。

对于DEV，在VS2017中，我修改webpack.config.js如下：

1) 将const webpack = require('webpack');添加到顶部

2) 注释掉行"devtool": "source-map"

3) 在new AotPlugin(..)块之后，我再添加一个插件：

new webpack.SourceMapDevToolPlugin({
    filename: '[file].map',
    noSources: true,
    moduleFilenameTemplate: '[absolute-resource-path]',
    fallbackModuleFilenameTemplate: '[absolute-resource-path]'
})

这似乎是在VS2017调试模式下使用IE11或Chrome的神奇魅力，它可以激活调试断点和Intellisense调试。但是，它确实破坏了直接在 Chrome 中进行调试的能力，主要是因为这会将 webpack 生成的源映射中的路径引用更改为您计算机上的绝对文件路径。 VS2017 把它吃掉了，所以它可以完美地找到源代码。我目前的计划是我将保留原始 webpack.config.js 并将其用于我在 DEV 网络服务器和 PRD 构建上的 DEV 测试，但在具有适当脚本的 webpack.vs.config.js 配置中使用此修订版（可能是自定义 npm 脚本）来使用 VS2017 完成我所有的本地机器开发工作。到目前为止...这对我来说几乎是一个完美的环境。

Answer 2

一种选择是使用 Angular CLI 和 ASP.NET 核心项目搭建应用程序脚手架。

npm install --global @angular/cli
ng 新我的应用程序
将 .angular-cli.json 文件中的 outDir 更改为指向项目的 /wwwroot 目录

将您的应用程序配置为静态文件服务器。

void ConfigureServices(...) {
   app.AddMvc(); // Microsoft.AspNetCore.Mvc
}

void Configure(app) {
   app.UseMvcWithDefaultRoute();
   app.UseDefaultFiles(); // Microsoft.AspNetCore.StaticFiles
   app.UseStaticFiles();
}

右击项目然后selectPublish Select Azure App Service 或 IIS/FTP 并按照屏幕上的说明进行操作

这是一个教程： https://medium.com/@levifuller/building-an-angular-application-with-asp-net-core-in-visual-studio-2017-visualized-f4b163830eaa

Answer 3

感谢大家的宝贵建议。我已经按照我在这里找到的优秀文章设法实现了这一点： http://candordeveloper.com/2017/04/12/how-to-use-angular-cli-with-visual-studio-2017/

这篇文章非常简单明了，而且效果很好。希望这对其他人也有帮助。

Answer 4

对于您描述为“没有后端代码的纯 Angular 2”的第一类应用程序，您可以使用 Visual Studio Marketplace 上提供的 Angular CLI project template。

该项目基本上是一个自定义的 ASP.NET 核心项目，它与 Angular CLI 应用程序共享根文件夹，并且是 Visual Studio 中传统开发体验之间的设计时适配器以及 Angular CLI 提供的基础设施。

该项目支持 Visual Studio 提供的标准发布功能。只有 Angular CLI 在构建期间生成的文件，没有 DLL，被发布到目标目的地。

披露：我是模板的作者。该代码可在 GitHub.

上获得

Answer 5

除了已接受的解决方案之外，我想为使用 IIS Web 部署（或 VS 发布工具中的任何其他方法）并且有多个部署环境的任何人添加一个建议: 使用 VS 解决方案配置非常简洁。

为每个要部署到的环境添加一个配置。

编辑 .csproj 文件并更改 "Exec Command"，将“$(ConfigurationName)”添加到脚本名称：

<Target Name="NgBuildAndAddToPublishOutput" AfterTargets="ComputeFilesToPublish">
<Message Text=" " Importance="high" />
<Exec Command="npm run build$(ConfigurationName)" />
<ItemGroup>
  <DistFiles Include="dist\**" />
  <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
    <RelativePath>%(DistFiles.Identity)</RelativePath>
    <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
  </ResolvedFileToPublish>
</ItemGroup>
</Target>

编辑您的 package.json 以包含名为 buildYourSolutionConfigName:

的脚本

{
    "scripts": {
        "buildYourSolutionConfigName": "ng build --someFlagNeeded",
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        ...
    }
    ...
}

现在您已具备根据目标环境的要求构建应用程序所需的一切。这允许您简单地 select VS 中的正确配置并推送发布。

从 Visual Studio 2017 年部署 Angular 2 个应用程序

Deploying an Angular 2 application from Visual Studio 2017

visual-studio

angular

node-modules

visual-studio-2017