Angular + XAMPP

En esta sección abordaremos el tema de correr nuestra aplicación angular en un servidor Apache, en este caso usaremos el que viene con la instalación de XAMPP. Tener en cuenta cada uno de los sencillos pasos para el despliegue.

• Modificar el archivo .angular-cli.json
  Lo primero que debemos hacer es modificar el nombre de la carpeta en la cual se construirá la versión de nuestro proyecto que se desplegara en XAMPP, para esto es necesario modificar la propiedad outDir en el archivo .angular-cli.json; este paso no es estrictamente necesario, puesto que solo estamos cambiando el nombre de la carpeta en donde se hará el build.
  
• Modificar el archivo index.html
  En el archivo index.html en el directorio src, se debe cambiar el atributo <base href="/"> por <base href ="./">.
  
• Ejecutar el comando build
  Ejecutamos el comando ng build --prod, este comando creara la versión para un ambiente de producción de nuestro proyecto en el directorio que señalamos en la primera sección (Modificar el archivo .angular-cli.json).
  
• Llevando Angular a XAMPP
  Copiamos el directorio generado en el directorio htdocs de nuestra instalación de XAMPP, después, vamos a localhost de nuestro xampp y en la url digitamos el nombre del directorio copiado después de localhost/[nombre del directorio angular].
  

NOTA: Como se puede observar en la URL de la imagen, la dirección es http://localhost/angular-primeng-base/angular-primeng-base/, esto se debe a que copie todo el proyecto en el directorio htdocs de XAMPP y después de correr el comando build, me genera el directorio del proyecto para ambientes de producción, el cual lleva el mismo nombre del proyecto (propiedad outDir).