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

Tienes dos opciones.

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

Adventages

• Separación adecuada de las preocupaciones.
• Puede implementar actualizaciones para su api y su interfaz de usuario 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 proyecto

Adventages

• 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 la aplicación de su cliente (Angular 2) e IIS / Casini para alojar su código de api web. Un buen ejemplo de cómo usarlo se encuentra en el tutorial de inicio rápido de Angular 2 (vinculado a más abajo). 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 del servidor lite. El servidor de nodos de desarrollo ligero solo sirve para una aplicación web, la abre en el navegador, se actualiza cuando HTML o JavaScript cambia, inyecta cambios de CSS usando sockets y tiene una página de respaldo cuando no se encuentra una ruta.

enlace

enlace

enlace

enlace

Mi vista

No hay ningún problema en el uso de Nuget / NPM tanto 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 sembrador enlace que te permite desarrollar y alojar el cliente y el servidor en un solo Visual Studio (2017) proyecto.

Estoy de acuerdo con los comentarios de @CountZero sobre las ventajas de usar dos sitios para hospedar (especialmente la separación de inquietudes) 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 es el único consumidor de su API es su propio cliente frontal. 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 yo haría.

En mi humilde opinión, si desea aprovechar Sesiones en IIS y / u ocultar el proceso de autenticación dentro de la API, escriba angular también en Visual Studio. 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 el proyecto backend, luego sepárelas en sus propios proyectos (la misma solución) y sirva api desde un subdominio o subcarpeta.

Si no estás interesado en ninguno de los anteriores y te sientes más cómodo con la forma en que estás acostumbrado, hazlo. 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 su proyecto de aplicación Angular para que se ejecute en http://localhost:55000/ y el proyecto API se puede configurar para que se ejecute en 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á las opciones para Single startup project y Multiple startup projects . Elija el botón de opción Proyectos de inicio múltiple. Luego, elija la Acción apropiada al lado de su proyecto Angular (Comience sin depurar, ya que es Angular y probablemente estará depurando eso en el navegador), luego al lado de su proyecto API, elija Iniciar.

Ahora, al ejecutar Run, la aplicación Angular se abrirá en el navegador y la API web también comenzará a ejecutarse. Puede establecer puntos de ruptura en sus métodos de API web y golpearlos desde la aplicación Angular.