Автоматически обновлять браузер для изменений в приложении ASP.NET Core на основе Angular 2

Question

Недавно я начал использовать Angular 2 с ядром ASP.NET. Я использую Webpack, чтобы избавиться от загрузочного беспорядка из SystemJs, из-за чего мое приложение загрузило ужасные 400 js-файлов для мира привет в Angular. Я нашел WebPackTaskRunner для интеграции Webpack в Visual Studio. Используя статью this, я настроил VS так, чтобы наблюдатель Webpack запускался при загрузке проекта.

Этот инструментарий позволяет мне изменить мое приложение Angular 2 с помощью CTRL + S, через несколько секунд скрипты скомпилируются, и я могу обновить его в браузере. Я хотел бы автоматизировать это, чтобы браузер обновлялся, когда некоторые js-файлы были изменены. Это можно сделать, используя webpack-dev-server. Проблема с ними заключается в следующем: он запускает другой веб-сервер (например, на порту 8080), и все мои маршруты не работают.

Например, я хочу получить данные от Пользователи/GetAll, обычно это на сервере отладки (http://localhost:5000/api/Users/GetAll). Так как приложение работает на localhost: 8080 с помощью webpack devserver, приложение пытается запросить http://localhost:8080/api/Users/GetAll, который, безусловно, не может работать с его веб-сервера ASP.NET Core. Чтобы обойти это, мне пришлось указать базовый url. И мне нужно запустить оба webservers (ASP.NET Core и Webpack dev)

Что лучше всего делать для живого обновления в Angular 2 с использованием ASP.NET Core с Visual Studio?

Answer 1

WebPack связывает ваше приложение Angular 2 и облегчает работу во время разработки, потому что он отслеживает изменения файлов в каталоге проекта. Он запускается на новом легком HTTP-сервере для отображения вашего приложения в браузере.

Вы должны включить CORS для вашего ядра ASP.NET, и он будет работать с приложением Angular 2, работающим в другом домене, поскольку у вас возникают проблемы с localhost: 8080 - localhost: 5000.

Enabling Cross-Origin Requests (CORS)

Кроме того, вы должны поместить URL для службы где-то можно изменить один раз для всех, а не жёстко в любом месте, вам нужно выполнить HTTP вызов. Этот файл должен содержать URL-адрес для каждой вашей среды, например: «Разработка, постановка и производство». Вы можете настроить WebPack для выбора URL на основе параметра build.

AngularClass/angular2-webpack-starter