Где разместить приложение Angular в решении ASP.NET Web API?

Я запускаю новое приложение и хочу использовать ASP.NET (4.6) и Angular 2. Для бэкэнда я создал проект в Visual Studio, и теперь мне интересно, куда поместить приложение Angular. Я действительно хочу использовать npm и node-tools для внешнего интерфейса, но, в конце концов, он будет размещен в том же экземпляре службы приложений Azure, где находится приложение Angular domain.com/и api под ним domain.com/api/или около того .

Как мне отделить приложения в Visual Studio? Должно ли приложение Angular быть в своем собственном проекте? Должен ли я иметь приложение Angular в том же проекте, что и API? Даже если я не хочу использовать для этого Nuget и другие VS-инструменты? (Для внешнего интерфейса VS был бы более или менее прославленным редактором кода). Я не нашел лучших практик для этой комбинации.

У вас есть два варианта.

Создайте отдельные проекты mywebsite.api и mywebsite.app в своем решении.

преимущества

• Правильное разделение интересов.
• Вы можете развернуть обновления для вашего API и вашего интерфейса независимо друг от друга.
• Архитектура сайтов может быть изменена независимо (т.е. вы можете обновить свой API для работы на asp.net 5, не влияя на сайт)
• Очиститель

Создайте один проект с клиентским приложением и API в одном проекте

преимущества

• Проще развернуть обновления
• Не нужно настраивать работу с CORS

Как разместить и разработать приложение локально.

Эффективным решением для разработки является использование lite-сервера для запуска клиентского приложения (Angular 2) и IIS / Casini для размещения вашего кода веб-API. Хороший пример того, как его использовать, приведен в кратком руководстве по Angular 2 (см. Ниже). Мой процесс разработки состоит в том, чтобы запустить API через Visual Studio и работать с кодированием сайта клиента, используя код Visual Studio и lite-сервер (Atom - еще один хороший выбор).

Из документации Lite-сервера. Облегченный сервер только для разработки, который обслуживает веб-приложение, открывает его в браузере, обновляет при изменении html или javascript, внедряет изменения CSS с помощью сокетов и имеет запасную страницу, когда маршрут не найден.

https://code.visualstudio.com/

https://angular.io/docs/js/latest/quickstart.html

https://www.youtube.com/watch?v=e_FVeYWUF3s

https://github.com/johnpapa/lite-server

Мой взгляд

Нет проблем в использовании Nuget / NPM в одном и том же решении, и это не должно отражать ваш выбор структуры проекта.

Я использую единственный проектный подход для демонстрации / проверки концептуальных приложений. Для производственных выпусков я всегда буду должным образом отделять свои проблемы и выделять отдельный проект API.

Я нашел этот проект сеялки https://github.com/damienbod/AngularWebpackVisualStudio/, который позволяет разрабатывать и размещать клиент и сервер в одном проекте Visual Studio (2017).

Я согласен с комментариями @CountZero о преимуществах использования двух сайтов для размещения (особенно разделение интересов), но для меня большим недостатком является необходимость поддержки CORS в вашем API, когда в большинстве случаев единственным потребителем вашего API является ваш собственный клиентский интерфейс. Я не эксперт по CORS, но это похоже на ненужные накладные расходы, а также сопровождается дополнительными угрозами безопасности.

Ну, очевидно, вы можете разделить их на два решения, добавить другой проект в решение или добавить их в один проект. Я скажу, что я буду.

ИМХО, если вы хотите использовать преимущества сеансов в IIS и / или скрыть процесс аутентификации в API, пишите под углом также в Visual Studio. VS2015 имеет довольно хорошую интеграцию (intellisense) с angular, если вы устанавливаете расширения для веб-разработки. Я должен сказать, что этот путь будет более компактным и портативным.

Если вы собираетесь добавить страницы документации в бэкэнд-проект, то разделите их на свои собственные проекты (то же решение) и подайте API из субдомена или подпапки.

Если вас не интересует ничего из вышеперечисленного, и вы чувствуете себя более комфортно с привычным для вас образом, сделайте это. Если вы собираетесь использовать аутентификацию на основе токенов, вы можете без сомнения разделять проекты.

В VS 2015 у вас есть возможность запустить более одного проекта в вашем решении при отладке, если вы установите разные URL-адреса проекта для каждого из них.

В качестве примера вы http://localhost:55000/можете настроить запуск своего проекта приложения Angular, а также настроить запуск проекта API http://localhost:55000/api. Вы устанавливаете свойство URL проекта в диалоговом окне свойств проекта на вкладке Web.

Затем, чтобы задать несколько запускаемых проектов, в диалоговом окне свойств решения в разделе «Общие свойства» выберите узел «Запуск проекта». Справа вы найдете варианты для Single startup projectи Multiple startup projects. Выберите переключатель «Несколько проектов запуска». Затем выберите соответствующее действие рядом с вашим Angular-проектом (начните без отладки, так как это Angular, и вы, вероятно, будете отлаживать его в браузере), затем рядом с вашим проектом API выберите Start.

Теперь, когда вы нажмете «Run», ваше приложение Angular откроется в браузере, и веб-API также начнет работать. Вы можете установить точки останова в своих методах Web API и использовать их в приложении Angular.