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

Posted 2023-03-07

【中文标题】从 Visual Studio 2017 部署 Angular 2 应用程序

【英文标题】：Deploying an Angular 2 application from Visual Studio 2017

【发布时间】：2017-08-06 15:55:07

【问题描述】：

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

【问题讨论】：

你调查过@angular/cli 吗？它是一个构建工具，可以自动化管理从 typescript 源创建生产构建的许多痛苦。查看cli.angular.io

嗨 Snorkpete，感谢您的建议。我已经尝试过 angular-cli，它很棒，但我无法让它与 Visual Studio 一起使用（没有播放/调试功能）。

您可以使用 chrome 的调试器进行调试 - 现在使用源映射的体验相当不错。不可否认，从 angular/cli 中，您必须从命令行运行，您将获得一个实时重新加载服务器，您只需启动一次即可。我只是建议这些事情，因为我认为使用 angular/cli 可以消除部署中的很多麻烦，因此值得带来一些较小的不便。您仍然需要将一些文件复制到您的 IIS 服务器，但如果您将您的源代码放在相对于您的 IIS 根目录的某个位置，甚至可以将 ng 构建配置为也将文件放置到位

我非常感谢这些建议，但我认为它可能会以一种不便换取另一种不便。我喜欢在 Visual Studio 中工作，因为它有很多很棒的功能。此外，我在整个堆栈上工作，而不仅仅是 Angular 部分，因此使用 Visual Studio 可以轻松地将所有层放在同一个 IDE 中的一个解决方案中。

对不起，我是个害虫——只是提供建议——但实际上，我不建议离开 Visual Studio 来编辑你的文件——只是为了使用其他工具来添加你的播放/调试功能'目前失踪

【参考方案1】：

这是我一直在研究的完全相同的安排，“圣杯”是使用 Visual Studio (2015/2017) 开发和调试由 WebAPI 支持的 Angular 2 前端（Material Design UI）就我而言，服务端点具有实体框架数据库层。正如您所说，获得适合所有需求的体面工作安排并非易事。但是，使用 Visual Studio 2017，我相信我的设置工作相当舒适，我也可以将其部署到我们内部的 TFS 构建系统。

我目前正在使用@angular-cli 基础，尽管它本身不是必需的。初始化后，您应该可以访问 npm 脚本来执行启动（又名 ng serve）和构建。在 VS2017 中，您可以使用 Task Runner（如有必要，安装 VS2017 的 NPM Task Runner Extension）窗口来配置运行“ng serve”命令打开您的项目。这将开始 webpack 捆绑和持续监控文件更改；后一部分对于 VS2017 中的顺利调试和开发环境非常重要，将其与项目打开事件绑定在一起可以让您多走一步。

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

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

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

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

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

我必须解决的最后一个难题是启用 CORS，以便网站前端 (Angular) 在 VS2017 中调试时可以连接到我的 WebAPI 后端。由于 @angular-cli 的内置 lite 服务器托管前端，而 VS2017 启动 IISExpress 来托管后端，它们将位于不同的端口上。我必须向我的后端添加 CORS 访问权限（我通过 global.asax.cs 文件在全局范围内执行此操作，并包装在条件编译标志中以确保它仅用于 DEV/本地调试版本）以允许前端提供服务调用后端的另一个端口。不过，它就像一个魅力。

---

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

ng new -si -sg -dir . MyApp

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

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

对于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 完成我所有的本地机器 DEV 工作。到目前为止……这对我来说几乎是一个完美的环境。

【讨论】：

您好 Londovir，感谢您的回答。我会试一试。实现应该内置到 Visual Studio 中的东西仍然存在很多障碍。我已在 visualstudio.uservoice.com/forums/121579-visual-studio-ide/… 上发布了对此功能的建议。如果您愿意，请投票给它，如果票数足够，那么微软可能会包括它。

这是一个很好的解释，@Londovir！您是否使用 Angular CLI 来生成 Angular 元素？我目前正在尝试弄清楚如何构建 ASP.NET MVC 5 后端，然后使用 ng 命令将 Angular 添加到其中。有什么建议吗？

@RobertBernstein，我为我的工作使用了不同的 CLI 参数集。您可以使用 Visual Studio 在解决方案中为 Web 前端创建项目，包括主目录。您可以在另一个项目中为相同的解决方案提供服务后端。诀窍是进入命令提示符，切换到 Web 项目的根文件夹，然后运行此版本的 CLI 命令：ng new -si -sg -dir . MyApp。 si 跳过包安装（VS 可以做到），sg 跳过 git（如果你不使用它[我使用 TFS]），dir 跳过为 Angular 应用程序创建子文件夹。跨度>

@Londovir 你为什么使用 ng 弹出？有没有办法保留使用 Angular CLI 添加组件等的能力，并且仍然可以在 VS2017 中工作？

@RobertBernstein 我看不到使用“stock”Angular CLI 覆盖源地图路径的任何方法（如我在上面编辑的响应中所示）。事实上，他们有一个很长的问题跟踪器（我认为现在已经关闭），它被要求能够将 webpack 配置设置传递到 CLI 工具中，并且他们拒绝了默认 CLI 的选项，因为他们想保留“固定“ 配置。我相信这就是为什么他们在任何情况下实际上都创建了弹出。我没有注意到弹出导致仍在运行“生成”的问题......也许我还没有碰到损坏的部分？

【参考方案2】：

一种选择是使用 Angular CLI 和 ASP.NET Core 项目来构建应用程序。

npm install --global @angular/cli

新建我的应用

将.angular-cli.json文件中的outDir更改为指向您项目的/wwwroot目录

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

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


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

右键单击项目并选择Publish 选择Azure App Service 或IIS/FTP 并按照屏幕上的说明进行操作

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

【参考方案3】：

感谢大家的好建议。通过遵循我在这里找到的优秀文章，我设法实现了这一点： http://candordeveloper.com/2017/04/12/how-to-use-angular-cli-with-visual-studio-2017/

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

【参考方案4】：

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

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

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

披露：我是模板的作者。代码可在 GitHub 上找到。

【参考方案5】：

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

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

编辑 .csproj 文件并更改“执行命令”，将“$(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",
        ...
    
    ...

现在您已经拥有了根据目标环境的要求构建应用程序所需的一切。这使您可以简单地在 VS 中选择正确的配置并推送发布。