自動刷新ASP.NET的核心瀏覽器基於Angular 2的應用程序更改

Question

我最近開始在ASP.NET Core中使用Angular 2。我使用Webpack來擺脫SystemJs的自動加載混亂，這導致我的應用程序爲Angular中的hello世界加載可怕的400個js文件。我發現WebPackTaskRunner用於在Visual Studio中集成Webpack。使用this文章，我配置了VS，以便在項目加載時啓動Webpack觀察器。

該工具包讓我使用CTRL + S更改我的Angular 2應用程序，幾秒鐘後編譯腳本，我可以在瀏覽器中刷新它。我想自動執行此操作，以便在某些js文件發生更改時瀏覽器會自動刷新。發現這可以使用webpack-dev-server完成。他們的問題是：它啓動另一個網絡服務器（例如在端口8080上），並且我的所有路由都被中斷。

例如，我想從用戶/ GetAll獲取數據，通常這是在調試服務器（http://localhost:5000/api/Users/GetAll）上。由於應用程序使用webpack devserver在localhost：8080上運行，因此該應用程序試圖請求http://localhost:8080/api/Users/GetAll，因爲它沒有ASP.NET Core web服務器，所以它肯定無法工作。要解決這個問題，我必須指定一個基礎URL。我需要啓動兩個Web服務器（ASP.NET Core和Webpack dev）

在Visual Studio中使用ASP.NET Core進行實時刷新的最佳做法是什麼？

Answer 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