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

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

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

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

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

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

我这样做有两个原因:通过Webpack bundler对我进行连续监控处理编译,VS2017也不需要这样做,这样我就可以确保使用typescript工具的npm包安装来编译TS 尽管我在选项菜单中覆盖了路径,但VS2017有时会坚持使用它.

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

即使Chrome运行浏览,VS2017文件中的断点也会受到影响,这是一个很好的奖励.我见过的唯一小问题是我通常必须在VS2017中开始调试,让Chrome启动我的网站,然后立即刷新页面,以便VS2017正确解析源图.我也注意到我倾向于将我的断点放在我的TS文件的副本中,这些副本显示在解决方案资源管理器的"脚本引擎"块中,该块在主动调试时出现,因为我的解决方案文件中的断点不直接似乎在Chrome下触发.我强烈怀疑这是因为我的源图没有使用正确的原始文件路径进行编译,因此VS2017无法知道"脚本引擎"中的文件与我的解决方案中的特定文件有关.我还在努力做这个.

我必须解决这个安排的最后一个问题是启用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(我个人不使用,因为我在不使用git的TFS工作室工作) ,并且目标是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的神奇魅力,它可以激活调试断点和智能感知调试.但是,它确实无法直接在Chrome中调试,主要是因为这会将webpack生成的源图中的路径引用更改为计算机上的绝对文件路径.VS2017吃掉它,所以它可以完美地找到它.我目前的计划是保留原始的webpack.config.js并将其用于我们的DEV网络服务器上的DEV测试和我们的PRD版本,但是在这里使用此修订版在webpack.vs.config.js配置中使用适当的脚本(也许是一个自定义的npm脚本)来完成我VS2017的所有本地机器DEV工作.到目前为止......这对我来说几乎是一个完美的环境.

Answer 2

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

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