Question

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

Answer 1

这是我一直在努力完成的同样的安排，与＃34;圣杯＆＃34;正在使用Visual Studio（2015/2017）开发和调试Angular 2前端（Material Design UI），在我的情况下由WebAPI服务端点支持，具有Entity Framework数据库层。正如你所说，获得适合所有需求的体面工作安排并非易事。但是，使用Visual Studio 2017，我相信我有一个相当舒适的设置工作，我也可以部署到我们的内部TFS构建系统。

我目前正在使用@ angular-cli基础，尽管这本身并不是必需的。初始化之后，您应该可以访问npm脚本来执行启动（即ng服务）和构建。在VS2017中，您可以使用任务运行程序（如果需要，还可以安装VS2017的NPM任务运行程序扩展）窗口来配置运行＆＃34; ng服务＆＃34;命令打开你的项目开放。这将开始webpack捆绑和连续监视文件更改;后一部分对于VS2017中的平滑调试和开发环境非常重要，并且将它与项目开放事件联系起来需要额外的一步。

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

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

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

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

即使Chrome运行浏览，VS2017文件中的断点也会被击中，这是一个很好的奖励。我见过的唯一故障是我通常必须在VS2017中开始调试，让Chrome启动我的网站，然后立即刷新页面，以便VS2017正确解析源图。我也注意到我倾向于将断点放在我的TS文件的副本中，这些副本显示在＆＃34;脚本引擎＆＃34;在主动调试时出现的解决方案资源管理器的块，因为我的解决方案文件中的断点直接在Chrome下无法触发。我强烈怀疑这是因为我的源图没有使用正确的原始文件路径进行编译，所以VS2017无法知道＆＃34;脚本引擎＆＃34;中的文件。与我的解决方案中的特定文件绑定。我还在为这个工作。

我必须为此安排解决的最后一个问题是启用CORS，以便在VS2017中进行调试时，网站前端（Angular）可以连接到我的WebAPI后端。由于@ angular-cli的内置精简版服务器托管前端，而VS2017启动IISExpress以托管后端，因此它们将位于不同的端口上。我不得不在我的后端添加CORS访问权限（我通过global.asax.cs文件全局执行，并包含在条件编译标志中以确保它仅用于DEV /本地调试版本）以允许前端进行服务调用后端的另一个端口。虽然像魅力一样。

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

ng new -si -sg -dir . MyApp

我已经指定跳过软件包安装的参数（因为VS2017可以在我保存package.json文件一次后就可以这样做），跳过git（我个人不会使用，因为我在TFS房子里工作它没有使用git），并且是针对Angular应用程序的工作目录（因为我不想让它创建额外级别的目录）。

然后，一旦完成，我使用Angular CLI的ng eject命令强制CLI'＃14;弹出＆＃34;该工具对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的神奇魅力，它可以激活调试断点和智能感知调试。但是，它确实无法直接在Chrome中调试，主要是因为这会将webpack生成的源图中的路径引用更改为计算机上的绝对文件路径。 VS2017吃掉它，所以它可以完美地找到它。我目前的计划是保留原始的webpack.config.js并将其用于我们的DEV网络服务器上的DEV测试和我们的PRD构建，但是在这里使用此修订版的webpack.vs.config.js配置正确脚本（可能是一个自定义的npm脚本）来完成我VS2017的所有本地机器DEV工作。到目前为止......它对我来说几乎是一个完美的环境。

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

除了已接受的解决方案之外，我还想为正在使用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",
        ...
    }
    ...
}

现在，您拥有了根据目标环境的要求构建应用程序所需的一切。这允许您只需在VS中选择正确的配置并推送发布。

Answer 5

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

npm install --global @angular/cli
ng new my-app
更改outDir文件中的.angular-cli.json以指向项目的/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

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

5 个答案: