Compartir vía

Tutorial: Creación de una aplicación de ASP.NET Core con Angular en Visual Studio

  • Artículo

En este artículo, aprenderá a compilar un proyecto de ASP.NET Core para que actúe como back-end de API y un proyecto de Angular para que actúe como la interfaz de usuario.

Visual Studio incluye plantillas de aplicación de página única (SPA) de ASP.NET core que admiten Angular y React. Las plantillas proporcionan una carpeta integrada aplicación cliente en los proyectos de ASP.NET Core que contiene los archivos base y las carpetas de cada marco.

Puede usar el método descrito en este artículo para crear Aplicaciones de Página Única de ASP.NET Core que:

  • Coloque la aplicación cliente en un proyecto independiente, fuera del proyecto de ASP.NET Core
  • Creación del proyecto de cliente basado en la CLI de marco instalada en el equipo

Nota

En este artículo se describe el proceso de creación de proyectos mediante la plantilla actualizada en Visual Studio 2022, versión 17.8.

Prerrequisitos

Asegúrese de instalar lo siguiente:

  • Visual Studio 2022, versión 17.8 o posterior, con la carga de trabajo ASP.NET y desarrollo web instalada. Vaya a la página de descargas de Visual Studio para instalarlo de forma gratuita. Si necesita instalar la carga de trabajo y ya tiene Visual Studio, vaya a Tools>Obtener herramientas y características..., que abre el Instalador de Visual Studio. Elija la carga de trabajo Desarrollo de ASP.NET y web y después elija Modificar.
  • npm (https://www.npmjs.com/), que se incluye con Node.js
  • CLI de Angular (https://angular.dev/tools/cli), que puede ser la versión que prefiera. El proyecto de front-end se crea mediante las herramientas de la CLI de marco que ha instalado en el equipo local, por lo que esto determina la versión de Angular que se usa en la plantilla.

Creación de la aplicación de front-end

  1. En la ventana de Inicio (elija Archivo>Ventana de Inicio para abrir), seleccione Crear un nuevo proyecto.

    Captura de pantalla en la que se muestra cómo crear un nuevo proyecto

  2. Busque Angular en la barra de búsqueda de la parte superior y seleccione Angular y ASP.NET Core.

    Captura de pantalla que muestra cómo elegir una plantilla.

  3. Asigne al proyecto el nombre angularWithASP y, a continuación, seleccione Siguiente.

    En el cuadro de diálogo Información adicional, asegúrese de que la opción Configurar para HTTPS esté habilitada. En la mayoría de los escenarios, deje la otra configuración en los valores predeterminados.

  4. Seleccione Crear.

    El Explorador de soluciones muestra lo siguiente:

    Captura de pantalla que muestra el Explorador de soluciones.

    En comparación con la plantilla de Angular independiente , verá algunos archivos nuevos y modificados para la integración con ASP.NET Core:

    • aspnetcore-https.js
    • proxy.conf.js
    • package.json(modificado)
    • angular.json(modificado)
    • app.components.ts
    • app.module.ts

    Para obtener más información sobre algunos de estos archivos de proyecto, consulte Pasos siguientes.

Establecimiento de las propiedades del proyecto

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto AngularWithASP.Server y elija Propiedades.

    Captura de pantalla que muestra las propiedades del proyecto abiertas.

  2. En la página Propiedades, abra la pestaña Depurar y seleccione la opción Abrir la interfaz de usuario de perfiles de inicio de depuración. Desmarque la opción Iniciar explorador para el perfil de HTTPS o el perfil denominado a partir del proyecto ASP.NET Core, si está presente.

    Captura de pantalla que muestra la interfaz de usuario de perfiles de inicio de depuración.

    Este valor impide abrir la página web con los datos meteorológicos de origen.

    Nota

    En Visual Studio, launch.json almacena la configuración de inicio asociada con el botón Iniciar de la barra de herramientas Depurar. launch.json debe estar en la carpeta .vscode.

  3. Haga clic con el botón derecho en la solución en el Explorador de soluciones y seleccione Propiedades. Compruebe que la configuración del proyecto de inicio esté establecida en Varios proyectos y que la acción de ambos proyectos esté establecida en Iniciar.

Iniciar el proyecto

Presione F5 o seleccione el botón Iniciar en la parte superior de la ventana para iniciar la aplicación. Aparecen dos símbolos del sistema:

  • El proyecto de API de ASP.NET Core que se ejecuta
  • La CLI de Angular que ejecuta el comando ng start

Nota

Compruebe los mensajes en la salida de la consola. Por ejemplo, podría haber un mensaje para actualizar Node.js.

La aplicación Angular aparece y se completa a través de la API (el puerto del host local puede variar respecto a la captura de pantalla).

Captura de pantalla que muestra la aplicación de previsión meteorológica.

Si no ve la aplicación, consulte Solución de problemas.

Publicación del proyecto

A partir de la versión 17.3 de Visual Studio 2022, puede publicar la solución integrada mediante la herramienta Publicar de Visual Studio.

Nota

Para usar la publicación, cree el proyecto de JavaScript con Visual Studio 2022 versión 17.3 o posterior.

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto AngularWithASP.Server y seleccione Agregar>Referencia de proyecto.

    Asegúrese de que el proyecto angularwithasp.client esté seleccionado.

  2. Elija Aceptar.

  3. Vuelva a hacer clic con el botón derecho en el proyecto ASP.NET Core y seleccione Editar archivo de proyecto.

    Se abrirá el archivo .csproj para el proyecto.

  4. En el archivo .csproj, asegúrese de que la referencia del proyecto incluye un elemento <ReferenceOutputAssembly> con el valor establecido en false.

    Esta referencia debe ser similar a la siguiente:

     <ProjectReference Include="..\angularwithasp.client\angularwithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>

  5. Haga clic con el botón derecho en el proyecto ASP.NET Core y elija Volver a cargar proyecto si esa opción está disponible.

  6. En Program.cs, asegúrese de que el código siguiente está presente.

    app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

  7. Para publicar, haga clic con el botón derecho en el proyecto ASP.NET Core, elija Publicary seleccione opciones para que coincidan con el escenario de publicación deseado, como Azure, publicar en una carpeta, etc.

    El proceso de publicación tarda más tiempo de lo que hace solo para un proyecto de ASP.NET Core, ya que el comando npm run build se invoca al publicar. BuildCommand ejecuta npm run build de forma predeterminada.

    Si publica en una carpeta, consulte Estructura de directorio de ASP.NET Core para obtener más información sobre los archivos agregados a la carpeta Publicar.

Solución de problemas

Error de proxy

Es posible que vea el siguiente error:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Si ve este problema, lo más probable es que el front-end se inicie antes del back-end.

  • Una vez que vea el símbolo del sistema back-end en funcionamiento, solo tendrá que actualizar la aplicación Angular en el explorador.
  • Además, compruebe que el back-end está configurado para iniciarse antes del front-end. Para comprobarlo, seleccione la solución en el Explorador de soluciones, elija Propiedades del menú Proyecto. A continuación, seleccione Configurar proyectos de inicio y asegúrese de que el proyecto de back-end ASP.NET Core esté primero en la lista. Si no es primero, seleccione el proyecto y use el botón flecha arriba para convertirlo en el primer proyecto de la lista de inicio.

Comprobación del puerto

Si los datos meteorológicos no se cargan correctamente, es posible que también tenga que comprobar que los puertos son correctos.

  1. Vaya al archivo launchSettings.json en su proyecto ASP.NET Core (en la carpeta Propiedades). Obtenga el número de puerto de la propiedad applicationUrl.

    Si hay varias propiedades applicationUrl, busque una con un punto de conexión https. Debe ser similar a https://localhost:7049.

  2. A continuación, vaya al archivo proxy.conf.js del proyecto de Angular (busque en la carpeta src). Actualice la propiedad de destino para que coincida con la propiedad applicationUrl en launchSettings.json. Al actualizarlo, ese valor debe tener un aspecto similar al siguiente:

    target: 'https://localhost:7049',

Docker

Si crea el proyecto con habilitada la compatibilidad con Docker, siga estos pasos:

  1. Una vez que se cargue la aplicación, obtenga el puerto HTTPS de Docker mediante la ventana contenedores de en Visual Studio. Consulte la pestaña Entorno o Puertos.

    Captura de pantalla que muestra los puertos de contenedor de Docker.

  2. Abra el archivo proxy.conf.js para el proyecto de Angular. Actualice la variable target para que coincida con el puerto HTTPS en la ventana Contenedores. Por ejemplo, en el código siguiente:

    const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
   env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7209';

    Cambie https://localhost:7209 al puerto HTTPS coincidente (en este ejemplo, https://localhost:62958).

  3. Reinicie la aplicación.

Pasos siguientes

Para obtener más información sobre las aplicaciones SPA en ASP.NET Core, consulte la sección Angular en Desarrollo de Aplicaciones de Página Única. En el artículo vinculado se proporciona contexto adicional para archivos de proyecto como aspnetcore-https.js y proxy.conf.js, aunque los detalles de la implementación son diferentes debido a las diferencias de plantilla de proyecto. Por ejemplo, en lugar de una carpeta ClientApp, los archivos angulares se encuentran en un proyecto independiente.

Para obtener información específica de MSBuild para el proyecto de cliente, consulte propiedades de MSBuild para JSPS.