为基于 ASP.NET Core 的 Angular 2 应用程序更改自动刷新浏览器答案

【问题标题】：Automatically refresh browser for ASP.NET Core based Angular 2 app changes为基于 ASP.NET Core 的 Angular 2 应用程序更改自动刷新浏览器
【发布时间】：2017-06-08 07:15:23
【问题描述】：

我最近开始使用 Angular 2 和 ASP.NET Core。我使用 Webpack 来摆脱 SystemJs 的自动加载混乱，这导致我的应用程序在 Angular 中为 hello world 加载可怕的 400 个 js 文件。我发现 WebPackTaskRunner 用于在 Visual Studio 中集成 Webpack。使用this 文章，我配置了 VS，以便在项目加载时启动 Webpack 观察程序。

这个工具包让我可以使用 CTRL + S 更改我的 Angular 2 应用程序，几秒钟后脚本编译完成，我可以在浏览器中刷新它。我想自动执行此操作，以便浏览器在某些 js 文件发生更改时自行刷新。发现这可以使用webpack-dev-server 完成。他们的问题是：它启动了另一个网络服务器（例如在端口 8080 上）并且我所有的路由都被破坏了。

例如我想从 Users/GetAll 获取数据，通常这是在调试服务器 (http://localhost:5000/api/Users/GetAll) 上。由于应用程序使用 webpack devserver 在 localhost:8080 上运行，因此应用程序尝试请求 http://localhost:8080/api/Users/GetAll，因为它没有 ASP.NET Core 网络服务器，所以肯定无法工作。为了解决这个问题，我必须指定一个基本 url。我需要同时启动两个网络服务器（ASP.NET Core 和 Webpack 开发）

在 Angular 2 中使用 ASP.NET Core 和 Visual Studio 进行实时刷新的最佳实践是什么？

【问题讨论】：

标签： angular visual-studio-2015 asp.net-core asp.net-core-1.1

【解决方案1】：

WebPack 捆绑您的 Angular 2 应用程序并在您开发时轻松，因为它会监视项目目录中的文件更改。它在一个新的轻量级 http 服务器中运行，以在浏览器中显示您的应用程序。

您应该为您的 ASP.NET Core 打开 CORS，它可以与在不同域中运行的 Angular 2 应用程序一起使用，因为您在 localhost:8080 到 localhost:5000 时遇到问题。

Enabling Cross-Origin Requests (CORS)

此外，您应该将服务的 URL 放在可以为每个人更改一次的地方，而不是硬编码在您需要执行 http 调用的任何地方。此文件应包含您拥有的每个环境的 URL，例如：开发、登台和生产。您可以配置 WebPack 以根据构建参数选择 URL。

AngularClass/angular2-webpack-starter

【讨论】：