¿Dónde colocar la aplicación Angular en una solución de API web ASP.NET?

Estoy comenzando una aplicación nueva y quiero usar ASP.NET (4.6) y Angular 2. Para el backend, he creado un proyecto en Visual Studio, y ahora me pregunto dónde colocar la aplicación Angular. Realmente quiero usar npm y node-tools para el front-end, pero al final estará alojado en la misma instancia de Azure App Service con la aplicación Angular en domain.com/y la api debajo domain.com/api/o tal.

¿Cómo debo separar las aplicaciones en Visual Studio? ¿Debería la aplicación Angular estar en su propio proyecto? ¿Debo tener la aplicación Angular en el mismo proyecto que la API? ¿Incluso si no quiero usar nuget y las otras herramientas VS para ello? (Para el front-end, VS sería más o menos un editor de código glorificado). No he encontrado ninguna práctica recomendada para esta combinación.

Tienes dos opciones.

Cree proyectos mywebsite.api y mywebsite.app separados en su solución.

Ventajas

• Separación adecuada de las preocupaciones.
• Puede implementar actualizaciones en su API y su front-end de forma independiente.
• La arquitectura de los sitios se puede cambiar de forma independiente (es decir, puede actualizar su API para que se ejecute en asp.net 5 sin afectar el sitio web)
• Limpiador

Cree un solo proyecto con la aplicación cliente y la API en un solo proyecto

Ventajas

• Más fácil de implementar actualizaciones
• No es necesario configurar para trabajar con CORS

Cómo alojar y desarrollar la aplicación localmente.

Una solución efectiva para el desarrollo es utilizar lite-server para ejecutar su aplicación cliente (Angular 2) e IIS / Casini para alojar su código API web. Un buen ejemplo de cómo usarlo se proporciona en el tutorial de inicio rápido de Angular 2 (vinculado a continuación). Mi proceso de desarrollo es ejecutar la API a través de Visual Studio y trabajar con la codificación del sitio del cliente usando Visual Studio Code y lite-server (Atom es otra buena opción).

De los documentos lite-server. Servidor de nodo único de desarrollo ligero que sirve una aplicación web, la abre en el navegador, se actualiza cuando cambian html o javascript, inyecta cambios CSS utilizando sockets y tiene una página alternativa cuando no se encuentra una ruta.

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

Mi vista

No hay ningún problema al usar Nuget / NPM en la misma solución y esto no debería informar su elección de la estructura del proyecto.

Solo uso el enfoque de proyecto único para aplicaciones de demostración / prueba de concepto. Para los lanzamientos de producción, siempre separaré mis preocupaciones correctamente y tendré un proyecto de API dedicado.

Encontré este proyecto de sembradora https://github.com/damienbod/AngularWebpackVisualStudio/ que le permite desarrollar y alojar el cliente y el servidor en un solo proyecto de Visual Studio (2017).

Estoy de acuerdo con los comentarios de @CountZero sobre las ventajas de usar dos sitios para alojar (especialmente la separación de preocupaciones), pero la gran desventaja para mí es tener que habilitar el soporte de CORS en su API cuando en la mayoría de los casos el único consumidor de su API es su Cliente propio front end. No soy un experto en CORS, pero esto se siente como una sobrecarga innecesaria y también viene con amenazas de seguridad adicionales.

Bueno, obviamente puede separarlos en dos soluciones, agregar otro proyecto en solución o tenerlos en el mismo proyecto. Te diré lo que haría.

En mi humilde opinión, si desea aprovechar las sesiones en IIS y / u ocultar el proceso de autenticación dentro de la API, escriba angular en Visual Studio también. VS2015 tiene una integración bastante buena (intellisense) con angular si instala extensiones de desarrollo web. Debo decir que de esta manera sería más compacto y portátil.

Si va a agregar páginas de documentación en un proyecto de back-end, luego sepárelas en sus propios proyectos (misma solución) y sirva la API desde un subdominio o subcarpeta.

Si no está interesado en ninguno de los anteriores y se siente más cómodo con la forma en que está acostumbrado, hágalo. Si va a tener una autenticación basada en token, puede separar proyectos sin duda.

En VS 2015, tiene la opción de iniciar más de un proyecto en su solución al depurar, siempre y cuando establezca diferentes URL de proyecto para cada uno.

Como ejemplo, configuraría la ejecución de su proyecto de aplicación Angular http://localhost:55000/y el proyecto API se puede configurar para que se ejecute http://localhost:55000/api. Establece la propiedad URL del proyecto en el cuadro de diálogo Propiedades del proyecto en la pestaña Web.

Luego, para configurar varios proyectos de inicio, en el cuadro de diálogo Propiedades de la solución en Propiedades comunes, seleccione el nodo Proyecto de inicio. A la derecha encontrará opciones para Single startup projecty Multiple startup projects. Elija el botón de opción Proyectos de inicio múltiple. Luego, elija la Acción adecuada junto a su proyecto Angular (Comience sin depurar, ya que es Angular y probablemente lo esté depurando en el navegador), luego, junto a su proyecto API, elija Iniciar.

Ahora, cuando presione ejecutar, su aplicación Angular se abrirá en el navegador y la API web comenzará a ejecutarse también. Puede establecer puntos de interrupción en sus métodos de API web y alcanzarlos desde la aplicación Angular.